Memoize Context
Loading "Memoize Context"
Run locally for transcripts
π§ββοΈ I've taken the
name and color state and combined them into a single
FooterContext as well as extracted some of the UI into a FooterSetters
component (for all the stuff that allows you to control the Footer). Feel free
to check my work to inspect the changes if you
want.π¨βπΌ Great, now if you pull up the React DevTools, you'll notice all the
components rerender whenever you change the counter in the App component. This
is happening because the
FooterContext is a new value prop every
render.So if you memoize the
value prop with useMemo, you can prevent the
unnecessary rerender of consuming components when the value prop doesn't
change.
