Don't Use React Context!! Use This instead

Why I Never Use React Context!? It's all because of how Context works by passing down props to every single child. And when a single state value gets updated the whole children tree gets re-rendered 😅
Yep. You are reading that correctly! That's a defect in React context and how it's implemented internally! Fortunately, there is a fix for it! In this video, we'll explore why you should avoid using Context medium to large-sized applications and what you should use instead?
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
⭐ Timestamps ⭐
00:00 Intro
01:10 1- Naming Conventions
00:57 Bad Context
05:50 React docs fix
06:46 Official React Team fix (It's not here yet)
07:34 Use this Library instead ✅
11:53 It's not perfect after all!
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with Smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
👉 Personal Links:
✨ My Portfolio islemmaboud.com
🐦 Follow me on Twitter: / ipenywis
💻 GitHub Profile github.com/ipenywis
Made with ❤️ by Coderone

[@CoderOne]

🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter

[@iCodeArtisan]

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

[@junsgk]

Zustand literally nailed client state management. End of conversation

[@ya4dang1]

@@junsgk Agree. Zustand with well-defined slices is the best

[@tomasburian6550]

We're using for all projects at our company but this library also looks fine. It simply comes down to a personal preference.

[@sergeys4732]

Reatom

[@rohitkochikkatfrancis]

True. No headaches. Just straight to the point.

[@airixxxx]

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.

[@NarinderSingh-dh3cq]

Yes, this is the solution we dont need to use any external library for this

[@oleksandrluchytskyi6867]

Yes, fully agree! I thought about this during all the video.

[@yega3k]

The children of the context provider, their children, grandchildren and great grandchildren will all get re-rendered. That’s the issue and it is a context problem.

[@jackhannon4322]

Yes, you will get re-renders. Components cannot selectively consume individual pieces of a context, the most obvious solution to this is splitting up context into a bunch of different contexts.

[@madman-uw9ii]

If you also put a different file . It will rerender all the context consumer

[@moonyyy9093]

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.

[@judegao7766]

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?

[@ronaldpaek]

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?

[@yvanjuleskana1350]

Exactly

[@CoderOne]

This is a known issue in React core. If you look into other store libraries (e.g Redux, Zustand, Jotai...) they only subscribe and re-render the target components. Not all children!

[@user-de6bt9uu1e]

​@@CoderOneif you create a context provider and manage it state in deferent file instead in the App component it will fix the Cart component re-render and also you can create separated contexts one for cart and second for products you can avoid CartList component rerender when cart state change or use zustand instead

[@ronaldpaek]

@@CoderOne thanks that's good to know. :)

[@madman-uw9ii]

​@@user-de6bt9uu1ebut notice that all the context consumers will rerender .hence ,therefore provider should not have more state

[@johnhershberg5915]

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!

[@vladislavpavlyuk5531]

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

[@crim-son]

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

[@mattburgess5697]

Most optimisation is premature. Wait until you need it.

[@crim-son]

Exactly 🙏

[@DigitalMonsters]

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..

[@luanmaffra9324]

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

[@emreq9124]

Can you provide sandbox to try myself?

[@lilbahr]

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?

[@wasd3108]

bad explanation about why cart is being re-rendered in the "bad" way example you have the state in App component, if you change state there it will re-render all the components, including cart, and cart will log being re-rendered, also you're using useEffect without a dependency "[]", why not just console.log in function body directly?, you don't need useMemo here what you can do is create a usable function that has the state in it, so the state isnt App level, but rather another component level that returns the providers and children that it will enwrap if you re-render App by changing one of the states, it will re-render any component in the whole app anyway if it's not in cached with useMemo lol I am gonna explain again just to make sure if you have an App and you return the simples component you can imagine u use useState in App and change the state of that variable, the simplest component will re-render, that's what you're basically doing what I am saying to do is, to create a component that will take in children through props, you use useState inside for state management and return provider writing the children changing that state wont re-render the cart if you want to know more about that why that is, google "blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior #component-render-optimization-techniques" and search for "component-render-optimization-techniques"

[@wasaabbi]

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

[@CoderOne]

If you stick a bit longer till this part 11:53 you would understand why!

[@stopPlannedObsolescence]

Why don't use simply customHook asking for the data object of the context

[@xxXAsuraXxx]

wrap the component with memo() ?

[@ya4dang1]

Not gonna work. React.memo() only works if props/hooks don't change. React useContext literally passes down the parent's props to *all* children under it. So any of those props changes, both parent and all children re-render

[@patrickconrad396]

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.

[@CoderOne]

In my opinion it's too much pay to deal with refs and pub sub for a simple context. I would switch to Zustand or Redux. at least for the newer features!

[@patrickconrad396]

@@CoderOne yea I keep hearing about both again. Redux definitely upped their game. But I try to limit imports. Is it an issue of performance or just ease of setting up as to why I should switch?

[@user-ws1co8wy5q]

This is really good. Thanks

[@lee2k137]

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

[@wabathur]

Vue is underrated imo

[@Gangbuster74]

Which vs code theme u are using @coderone please reply

[@CoderOne]

Halcyon

[@kevinat71]

its okay, but i prefer zustand, jotai or rtk

[@StefanoV827]

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.

[@aidanwalker7136]

can I have the github repo?

[@long-live-linux]

Web frontend articles are filled with "use this instead"

[@samnayakawadi]

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

[@yolla_4]

thanks for this video

[@JS_Jordan]

zustand!

[@rishiraj2548]

👍🙏

[@testchannel3265]

dont use react

[@laxmiprasanna4092]

Redux ?

[@NotTheLastOne]

too complicated. so many abstractions

[@laxmiprasanna4092]

@@user-tk5wt2xu9s not really. I just learned and used it in 3 days. It just took that much time to learn react-redux and redux toolkit. Trust me they are very good. You can maintain state in small slices. Not everything in one place. Also state updates does not trigger all app like context does .

[@CoderOne]

I'm with team Zustand 😅

[@juanmacias5922]

@@laxmiprasanna4092 exactly, I feel like many people haven't actually tried redux toolkit.

[@mbertufpv]

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

[@najlepszyinformatyk1661]

jotai is much better choice

[@doglaffs7035]

I stopped watching after 2 minutes because I struggle to understand you. It would help if you were to articulate better or speak slower

[@xtemecollection8540]

Use this instead, use this instead.. nonsense

[@anasouardini]

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.

[@anasouardini]

@@icheckedavailability Did you try google?

[@dachewster9999]

I believe both are made by the same dude, and i think he actually just recently released a 3rd state management library too

[@najlepszyinformatyk1661]

do you know that Jotai uses context as well? :) github.com/pmndrs/jotai/blob/main/src/react/Provider.ts

[@deathineyes]

I will take a look. Usually useContext for small states is not a problem.

[@deathineyes]

@@najlepszyinformatyk1661 really nice answer, I thought to examinate the library and to see how they "deal" with it. You can watch the video which I posted in the comments bellow, use-selector-context is using the original context too and I think it is hard to say is it with better performance or not.