Memoize Context

πŸ§β€β™‚οΈ 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.