117 lines
3.3 KiB
Markdown
117 lines
3.3 KiB
Markdown
|
---
|
||
|
|
title: Our Notes On React
|
||
|
|
sidebar: Handbook
|
||
|
|
showTitle: true
|
||
|
|
hideAnchor: true
|
||
|
|
---
|
||
|
|
|
||
|
|
The [React docs](https://reactjs.org/docs/getting-started.html) are great for getting from zero to one.
|
||
|
|
|
||
|
|
## Hooks
|
||
|
|
|
||
|
|
I found hooks somewhat counterintuitive at first, but they're very powerful once you grasp them. Refer to the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html). - @samwinslow
|
||
|
|
|
||
|
|
1. Only call from the top level of a functional component
|
||
|
|
2. Do not call outside a functional component or from plain JS (you can call from custom hooks)
|
||
|
|
|
||
|
|
### useState
|
||
|
|
|
||
|
|
Uses destructured array assignment syntax
|
||
|
|
|
||
|
|
`const [value, setValue] = useState(initialValue)`
|
||
|
|
|
||
|
|
An updater function can be passed to the setter so that multiple updates can be called in sequence, or to merge-update the state via spreading if it's an object. The updater is a pure function which takes previous state and returns next.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
// bad
|
||
|
|
setValue(value + 1)
|
||
|
|
setValue(value + 1)
|
||
|
|
|
||
|
|
// good
|
||
|
|
setValue(value => value + 1)
|
||
|
|
setValue(value => value + 1)
|
||
|
|
```
|
||
|
|
|
||
|
|
In general, derive data while rendering rather than storing derived values in state (e.g. filtering local data). However, if expensive filtering or join operations are to be performed and/or the component re-renders frequently, a memoized state management library might be better.
|
||
|
|
|
||
|
|
### useEffect
|
||
|
|
|
||
|
|
Takes a callback function which may have (potentially global) side effects. Runs on every re-render by default.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
function EffectExample() {
|
||
|
|
const [value, setValue] = useState(initialValue)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
document.title = `The value is now ${value}`
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<p>{value}</p>
|
||
|
|
<button onClick={() => setValue(value => value + 1)}>Use Effect</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The rendered value is not a special data binding that causes it to listen. It is merely a reflection of a new value rendered as a result of calling the setter.
|
||
|
|
|
||
|
|
Can return a cleanup function from the effect and declare when it should run
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
function ApiStatus({ service }) {
|
||
|
|
const [isOnline, setOnline] = useState(null)
|
||
|
|
|
||
|
|
const { id } = service
|
||
|
|
useEffect(() => {
|
||
|
|
const handleStatusChange(status) => {
|
||
|
|
setOnline(status.isOnline)
|
||
|
|
}
|
||
|
|
SomeApi.subscribe(id, handleStatusChange)
|
||
|
|
|
||
|
|
return () => SomeApi.unsubscribe(id, handleStatusChange)
|
||
|
|
}, [id]) // Only run when `id` changes (sync to state)
|
||
|
|
|
||
|
|
// rendering
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### useLayoutEffect
|
||
|
|
|
||
|
|
Same as `useEffect`, but runs callback synchronously during commit lifecycle phase
|
||
|
|
|
||
|
|
### useMemo
|
||
|
|
|
||
|
|
Recalculates value only when dependencies change
|
||
|
|
|
||
|
|
### useCallback
|
||
|
|
|
||
|
|
Updates callback function reference when dependencies change
|
||
|
|
|
||
|
|
### useRef
|
||
|
|
|
||
|
|
Mutable ref used to access returned child.
|
||
|
|
|
||
|
|
- Persists between renders
|
||
|
|
- Default: `{ current: null }`
|
||
|
|
- Plain object; mutating does not trigger re-renders
|
||
|
|
|
||
|
|
### Custom Hooks
|
||
|
|
|
||
|
|
Listeners and API connections can be extracted to a custom hook and reused
|
||
|
|
|
||
|
|
Examples from popular libraries:
|
||
|
|
|
||
|
|
- React-Redux: `useSelector`, `useDispatch`
|
||
|
|
- React-Router: `useHistory`, `useLocation`, `useParams`
|
||
|
|
- `useFormState`
|
||
|
|
|
||
|
|
## Useful resources
|
||
|
|
|
||
|
|
- [Dan Abramov - A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/)
|
||
|
|
- [Mark Erikson - A Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
|
||
|
|
|
||
|
|
**[Back: Technologies to learn](../technologies-to-learn)**
|
||
|
|
|