Context
Loading "Context"
Run locally for transcripts
π¨βπΌ We now have a counter inside the
App
component and every time that count is
incremented, we trigger a rerender of the Footer
component! Have we lost the
ability to take advantage of React's element optimization? No!Instead of accepting the
color
via props, we can place it in a context provider
that the Footer
can consume. And with that, the footer
no longer accepts any
dynamic props so we can move it outside the App
component again, which means
the only way it can be rerendered is if the context changes (which is exactly
what we want).When you're done, make certain that the
Footer
only rerenders when the color
changes and not when the counters are incremented.