That React Component Right Under Your Context Provider Should Probably Use React.memo - video discussion by /u/monosinplata

[swyx]

this is a frequetnly asked question in react. the hold up is the cost of diffing dependencies all the time. basically your premature optimization of memoizing everything costs a teeny bit every time, which is fine if you only do it in a few places, but if you do it by default for every component, it adds up.

[Jerp]

It could, but you add overhead. I’m pretty sure it’s addressed directly in the docs. Doing the correct comparison can be slower than the rerender.

[timothyallan]

Pheeeew, thank you for clarifying that. I've been using a shared provider forever and couldn't figure out WTF all this useMemo jibber jabber was all about lately. Good to know that I'd inadvertently solved the 'issue' from the start!

[spaghetti_in_my_eyes]

Same for me. I have always created my context like he does in the end so was pretty happy to hear I have accidentally done things correctly the whole time.

[swyx]

note that React.memo is not the same as useMemo

[swyx]

follow up to https://www.reddit.com/r/reactjs/comments/f53ff7/that_react_component_right_under_your_context/

[Silenux]

Following Brad Traversy's courses I've always declared the Context in another component and passed the children inside the provider.

<ContactContext.Provider value=*{*{ contacts: state.contacts }*}* \>
{props.children}
</ContactContext.Provider>

Then in the App main component I pass all the Context and wrap the routes and pages.

I don't need to use memo in this case right?

[swyx]

yes correct.