3.3 KiB
| title | sidebar | showTitle | hideAnchor |
|---|---|---|---|
| Our Notes On React | Handbook | true | true |
The React docs 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. - @samwinslow
- Only call from the top level of a functional component
- 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.
// 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.
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
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