Don't Use React Context!! Use This instead

Рет қаралды 27,208

Күн бұрын

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

Пікірлер: 74

@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 10 ай бұрын

Reatom

@rohitkochikkatfrancis 3 ай бұрын

True. No headaches. Just straight to the point.

@airixxxx 11 ай бұрын

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 11 ай бұрын

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

@oleksandrluchytskyi6867 10 ай бұрын

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

@yega3k 10 ай бұрын

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 10 ай бұрын

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 9 ай бұрын

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

@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?

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

@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 9 ай бұрын

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

@vladislavpavlyuk5531 Жыл бұрын

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

@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!

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

@emreq9124 Жыл бұрын

Can you provide sandbox to try myself?

@lilbahr 8 ай бұрын

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?

@luanmaffra9324 Жыл бұрын

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

@Gangbuster74 10 ай бұрын

Which vs code theme u are using @coderone please reply

@CoderOne 10 ай бұрын

Halcyon

@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"

@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?

@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 7 ай бұрын

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

@lee2k137 Жыл бұрын

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

@wabathur Жыл бұрын

Vue is underrated imo

@aidanwalker7136 Жыл бұрын

can I have the github repo?

@kevinat71 Жыл бұрын

its okay, but i prefer zustand, jotai or rtk

@long-live-linux Жыл бұрын

Web frontend articles are filled with "use this instead"

@yolla_4 8 ай бұрын

thanks for this video

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

@samnayakawadi 10 ай бұрын

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

@rishiraj2548 Жыл бұрын

👍🙏

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

@JS_Jordan Жыл бұрын

zustand!

@mbertufpv Жыл бұрын

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

@testchannel3265 Жыл бұрын

dont use react

@najlepszyinformatyk1661 Жыл бұрын

jotai is much better choice

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