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.