Mastering React Context 2023: The Complete Guide!

React Context is a critical concept to master once your projects get to a certain size. Context can drastically improve your code readability, help you avoid prop-drilling (passing props down through lots of components), and increase code maintainability.
0:00 Why learn React Context?
0:20 Overview: When and how to use context
5:56 Example project: Properly implementing context
⭐ My GitHub: github.com/joschan21
⭐ Our startup: wordful.ai

[@Douwab]

Really cool video! I use context a lot of times in my apps. If I could add a little something: I usually like to add a hook that goes with my Context Provider. An example here would be to export a useTheme method that returns useContext(ThemeProvider). It is not game changing but it adds a little bit of simplicity in the consumer code. 😊

[@joshtriedcoding]

Cheers man, with increasing complexity that sounds very reasonable

[@lionroot_tv]

Great stuff, thanks Josh!

[@joshtriedcoding]

Cheers mate

[@belkocik]

Good explanation! :)

[@codewithguillaume]

I was wrong about Context. Thanks Josh !

[@codewithguillaume]

Love your new video setup btw ! :)

[@joshtriedcoding]

@@codewithguillaume Thanks man! In what sense were you wrong?

[@techworld3043]

great explanation.

[@joshtriedcoding]

Cheers

[@MultiReylords]

Hey Josh, It’s been a blessing to discover your youtube channel, I have learned so much from your recent videos.
You mentioned that you do/did freelance, do you have any tips for how to get into that sort of work as a beginner? (I am based in Germany if that helps)

[@joshtriedcoding]

Cheers man. I'm based in Germany too, I think if you have no connections in the field or work to take on, making free stuff for yourself and your portfolio would be the first step. Get good at whatever you're coding and don't get lost in tutorial hell. After coding some projects, reach out to see if someone is willing to let you work for free (ideally someone well-known or with a good reputation). After all, you are providing real value to them for free.
Then I'd take the next step to reach out to clients with that work experience under your belt and really give them value in your proposal. Analyze their website - what can be improved? Page speed? Design? Automating certain functionalities? Let them know (ideally, in a personal video you record for them, or just via email if you don't like that approach).
Make sure to sound very respectful in that email, if you're working with smaller companies chances are someone they know personally did that website and you don't want to offend them. That was my approach :) Hope that text wasn't too long haha

[@MultiReylords]

@@joshtriedcoding Thank you for taking the time to write out such a detailed reply! This actually helps a ton and confirms that I am on the right path. 👍

[@DiogoLScarmagnani]

@@joshtriedcoding it was a very good text, I loved those tips. Thank you.

[@oncoding4520]

nice video, very informative and at the same time very helpful :)) What app do you use also to draw?

[@dreamsachiever212]

excalidraw

[@angladephil]

Context is ultimately a complicated (sophisticated ?) way to use global variables or objects ...
Thanks for the good teaching.

[@airixxxx]

Global variables don't alter state.

[@rafaelmelo7665]

👏👏👏👏👏👏👏👏👏👏👏

[@sewerynwozniak3417]

Why setThemeValue in ThemeContext is empty and you add logic inside PageContent?
Is it typical approach?

[@0xPanda1]

niiiice

[@0xPanda1]

keep it up

[@joshtriedcoding]

Cheers appreciate it

[@blazi_0]

Hi man a quick question that i really need to know, are providers exposed to a child that didn't export it?
Let's say i passed password context to the root component
Will user will be able to see password from the footer using some kind of trick from the browser? Though i didn't import the password from footer

[@samoniumuziejus]

I used context-selector-api because useContext had rerendering problems

[@faiquejatu8649]

What is the root component for next 13 applications?

[@emigrek]

Why doing this classic way since we have things like Redux, Recoil, etc...? Whats the pros?

[@joshtriedcoding]

The first one is that you don't have to set aside days (at least for me it was days) to learn redux. Second, in most well-thought-out architectures you are fine with context and don't even need "heavier" state management solutions

[@sewerynwozniak3417]

Good example of how typescript can make things much more complicated
Really it was introduced to make coding easier and for me it's most time-consuming part of coding in react

[@zombizombi]

I'm only half way through the video butwhat do you mean its making things more difficult? He's only added type information which means more type inference and better completion... how is that a bad thing?

[@crispasmakanani6617]

hi can we talk inbox 😊

[@2gbeh]

In "2023"??? It's literally the same thing as it has always been years prior.