Split Context
Loading "Split Context"
Run locally for transcripts
π¨βπΌ Something you may have noticed is that the
FooterSetters component is
rerendering whenever the footer state changes, but that component doesn't
actually depend on the footer state at all. All it cares about is the setter
functions which never change!Let's assume that
FooterSetters is an expensive component to render. How could
we prevent it from rerendering unnecessarily when the footer state changes?How about you split the context into two separate contexts: one for the state
and one for the setters. For example:
function SomeProvider() {
const [state, setState] = useState()
const setters = useMemo(() => ({ setState }), [setState])
const stateValue = useMemo(() => ({ state }), [state])
return (
<StateContext value={stateValue}>
<SettersContext value={setters}>{children}</SettersContext>
</StateContext>
)
}
This way,
FooterSetters can consume only the setters
(which never change)!Give that a shot in this exercise (and for extra credit you can also
memo-ize
the FooterSetters component and it will never rerender!).This is going to require a fair bit of refactoring, but it should be pretty
quick. Make sure you check out how components rerender in the React DevTools!