That React Component Right Under Your Context Provider Should Probably Use React.memo

We can provide context to components as a child prop of the provider and not as a direct child.

There will be a problem if you have another state like toggle and setToggle in Context and you import it in Direct child component and then if you change the value of theme in deeper child ,it will re render both direct and deeper child ,even we did not changed the value of toggle in direct child , can you solve that issue ???

Very good video, thanks.

Glad I did the child thing from day 0

Hi. In your first example, if DirectChild and DeeperChild had other components in-between - they would not re-render on toggleTheme only DirectChild and DeeperChild will be re-rendering? right?

What a great video i hope you make more videos about context and how to imporve its performance especially in large apps

Is there any way to avoid the rerendering that happens when you use useContext inside a component

My work flow is like this
I have a global context and global states that have to be shared across many components some of these states arent related to each other and some are
So when i use them inside many component some components rerender themselves when they shouldnt rerender themselves they just rerender themselves because I'm using useContext inside them and using some global states that are inside that context
I hope you understood my issue so far there is no performance issues at all but i was just wondering why is this happening whey these components get rerender every time another state in another component got rerender and the only reason i saw is because i'm using useContext inside them and inside it im pulling out some state from that global context

react-final-form build on this "Providers -> children" approach

Thank you!

If someone's confused about the second approach, here's what Dan Abramov has to say about it: "But it still has the same  prop it got from the  last time, so React doesn’t visit that subtree."

Source: Before You memo() — Overreacted

Also, you just earned a subscriber Leigh. You content is gold.

Cool

Finally got the answer.. Thank you alot

Really great video. Thank you.

Succinct video that is direct to the point. I enjoy your videos. Thanks for creating them!

Great video!

Nice vídeo!

What if you had dependent contexts like TableContext => RowContext => RowDetailsContext? Would you have to memoize at each level?

Good stuff mate. Just a question. Let's say you have a list that you need to order and filter. Would you use context for setting the filters, ordering the list, etc? Thanks mate

The reason the second fix works: In both cases, App is responsible for rendering DirectChild, so in both cases, DirectChild will re-render when App re-renders. After the refactoring, App is no longer being re-rendered when the state changes; only MyProvider is. Because App no longer needs to be re-rendered, DirectChild does not need to be re-rendered.

Wow, another awesome video. Thank you very much

Your videos are the best

I am very happy to have stumbled upon your channel! Excellent content and explanations !! Thanks man!

Thank you for the explanation!
I was actually using the second method without understanding why 😅

This video earned you a subscription. Great explanation!

Great explanation! I've been using this pattern (Context + reducer) and so far I'm very satisfied with it.
I just want to leave a question about a use case that might occur:

Imagine that instead of one DeeperChild, you have a list of them. Any change of the context's state triggered by one of those components will trigger a re-render in the remaining ones. Do you see any way of avoiding this or you wouldn't care about it?

Best regards

Nice video, thanks. A couple of comments:
1. The trick with not needing to memioze if using the "children" prop was new to me. This needs some further digging, I feel like something might be missing here. Is this documented somewhere?
2. Perhaps you should also memoize the context value? In this case the context value is always going to be a new object, but since you are creating the context value in App (which is never re-rendered) then it's not a problem after all. If this theme provider was also rendered further down the tree, it would probably re-create the context value too often and hence invalidate the children too often as well.

Would you explain please, why with {children} it doesn't do the unnecessary rerender

I like that you always make your videos short and informative.

good shit!

excellent explanation.

Now you have video quality greater than 360p, thanks for that.

Great job sir, there is few content creators like you who dive deep into JS stuff... I'm always enjoyed watching your videos hopefully you never stop that . BestRegards

i have to wrap one level top component with react.memo before component that will useContext?? sorry if my english is bad heheh

Hello