How to use Context API in React/NextJS

CONNECT ON MY DISCORD:

In this video you'll learn how to use the React Context API. Context is a great way to maintain state across an entire React/NextJS app

#softwareengineer #react #nextjs

CONNECT ON MY DISCORD:

[ambershipley]

After reading through about 4 tutorials (I'm a new developer) about how to use context, I still wasn't quite sure how to implement it... Then I found this video and you helped me understand it! Thank you!

[marie-elizeventer]

Oh! So clean and clear to understand. Thank you very much for makimg this tutorial!

[Dilchaspian]

I mean u solved my whole problem in next js, U earned a new subscriber.

[Munk-tttz]

OMG, I finally understand context. Thank you so much!!! 🙏

[anuchapatthanajan]

Great vid, easy to understand Context API in 10 mins. Thank you.

[matheusroberto]

Clear explanation, congratulations man.

[Abramov]

THANK YOU VERY MUCH ! Thank u from Russian watcher

[alexkey]

great tutorial! i find yours to be the most useful! short and straight to the point.

[nivvyosaurus]

Good vid, very methodical explication. I didnt follow your example exactly but i was able to step through with you are the same time and apply context how i needed! Cheers!

[eshw]

You have such an underrated channel bro! Love the content.

[chrislyonm]

Learned a lot, thanks!
One other catch is that when that context value changes, all the provider's children re-render. So with global state, it's great for things that don't change often like "dark mode".

ReactQuery's invalidateQuery with caching is good for updating places across the app that use the query data after the user posts new data to the API.
Apollo GraphQL's refetchQueries does the same thing.

For the very few remaining amount of cases, these options or any similar data store can solve that problem too.
1. Redux (complicated)
2. Zustand (simpler)
3. Jotai (even simpler)

[fullstack_journey]

If i add a console.log in the code for the provider, its being fired even in the server console, this means its being rendered in server as well as client? how to make it only client side, thanks

[mohammadmalek]

This video is very helpful
Thank you ❤

[ryostyles]

If you wrap entire layout.js with context api that has "use client", does that make the entire app client side??

[luucaasvaz]

great video, thanks you help me, +1sub 👊

[marlonM_]

great video, problem solved, thank You!

[Garoa]

i'm trying using this in a [id].js file but when i change the id my useState const reset. ;-;

[eshw]

Any chance you can make a full stack mern tutorial, like a social media/blog app or chat app? Thanks!!

[chiefrocka]

What should I use if I want to keep the context on a page refresh?

[ansumandas]

So confusion difficult to understand for beginner