Don't Use React Context!! Use This instead

thanks for this video

How does this relate to: "This Context API Mistake Ruins Your Whole React App (All Components Re-Render)" by ByteGrad? Doesn't that solve the issue?

So, Its better to go with redux. Subscribed btw.

Which vs code theme u are using @coderone please reply

The only reason it's re rendering is because you put the state on the App component, that's what's re-rendering. This is not a Context problem, it is a logic problem, if you create a separate file with the context of the app and pass it to its children you wont get re-renders.

Can you provide sandbox to try myself?

I saw someone using context with refs and a pup sub system. that may be the new approach for me. Using refs stopped the propagation of changes while subscribing to specific stores allowed for only the specific component to update its own state with the new info and make the change there.

I decided to try context a couple months ago for the first time on a work project and im not sure i really understood it but shoe horned it in anyway and got everything working or so i thought, now nearing the end of a project and getting all these unintended re-renders from parent state changes Q_Q no idea how to fix it..

<NavigationContainer>
<AuthProvider>
<DatabaseProvider installedAppVersion={currentVersion}>
<StorageProvider>
<ContentProvider>
<GeoLocationProvider>
<PaperProvider theme={theme}>
<GestureHandlerRootView style={{flex: 1}}>

You Just avoid that using the pattern provider and stop using useContext like a junior dev

do you have any resource that deep-dives the last bit around putting console.log inside the useEffect vs directly in the function body - you mentioned something about concurrent rendering - does it mean that React concurrent rendering would re-execute your function but it may not actually re-render (because useEffect is not called)? but why?

can I have the github repo?

Only issue I have with this video is you're saying "re-render" often, but that's not actually what's happening. A functional component's function being invoked doesn't mean the DOM was updated. If a function call results in the DOM being updated that's a re-render. This is just React calling the function to see if the DOM needs to be updated, which it doesn't, so the expensive part of redrawing the DOM gets skipped.

That said, it's still extra work that's being done pointlessly. And depending on what you have going on in your components it could be a major performance hit. So it's worth keeping this in mind, and I'll take note of this context issue from now on! Thanks!

jotai is much better choice

Context is not a global state manager. React describe it as another (smartest) way to pass props to children. So it's normal that every child will refresh changing params to the context.
Thats why redux exists.

Web frontend articles are filled with "use this instead"

dont use react

redux-toolkit uses a Provider as well, I remember this won't have a rerender on the entire sub components, corret me if I'm wrong please.

Honestly, i think I'll just stick with using context the way it is, React is fast, no cap.... I'll only resolve to this if i have noticable performance issues, and not when my component is rendering just a little more than normal

zustand!

wrap the component with memo() ?

Why you put log with render inside useffect? It should log info being standalone console log anywhere in the body of component

Personally, I think Zustand is a perfect client-side state management library

I thought that's how context is normally supposed to work? I don't think Context actually causes rerenders but since you're declaring the state and passing that into Context anytime the state changes it will cause the whole context wrapper to re-render?

its okay, but i prefer zustand, jotai or rtk

Redux ?

I already used it with RTK query. Make selectors. Same approach

👍🙏

it reminds me in VueJS simply provide("key", "value") and inject("key"), it's blazingly fast 🙄

useContext is just another useless React hook.
I personally just use Jotai, matter of fact, most of the time I just write Jotai myself. If you've never done that yourself, you might think it's complex but it's only around 10 lines of code that you only write once throughout your app.

What the plugin prints before functions "Ask Easy code Explain ... "?