State Management in React | Context API useContext | React Tutorials for Beginners

Learn State Management in React with this Context API tutorial and the useContext hook. React JS allows us to drill props through components, but we can avoid this with the Context API and the useContext hook.

🚀 This lesson is part of a Learn React tutorial series playlist:

State Management in React | Context API Tutorial | useContext hook

(00:00) Intro
(00:05) Welcome
(00:13) Quick Overview
(01:05) Creating Context
(03:54) Adding the DataProvider
(05:03) Moving State and Logic to Context
(07:21) Refactoring Header with useContext
(10:21) Refactoring Nav with useContext
(11:53) Refactoring Home with useContext
(14:42) Refactoring NewPost with useContext
(17:21) Refactoring EditPost with useContext
(19:30) Refactoring PostPage with useContext
(22:00) App component clean up
(23:04) Does it all need to be in context?
(24:37) Component state vs shared state with context
(26:17) Refactoring component states while keeping shared state in context

🔗 Rules of Hooks:

🔗 Collections of Hooks:

🔗 Axios:

🔗 React Router:

🔗 JSON-Server:

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this tutorial about the React Context API and useContext hook helpful? If so, please share. Let me know your thoughts in the comments.

#react #context #useContext

[ikurbano]

I am so glad I found your react tutorials. You have an educator's gift. Everything is so clear so, there is no missing points throught out the video, at all; it all feels like a smooth stream of knowledge coming from you. Thank you very much! You make this world a better place!

[bfmcoding]

On some other tutorials I always doubt about put every state to global state. Finally I found this tutorial who only put component state to global state if their really needed to be stored in global state. thanks Dave

[HologramJay]

This tutorial was incredibly helpful. I like how you built up the context, but then broke it down to only shared data and created local state for the other components. I'm learning a lot from your channel. Thanks, man.

[Drakan]

Simple trick for using contextual data for those interested, and avoiding the pesky problem of property references:
ex. in the Home component, when destructuring the DataContext, use object property renaming to avoid having to scrub through the component itself and rename references to the original functional property "posts" by destructuring as follows:

_const { searchResults: posts, fetchError, isLoading } = useContext(DataContext);_

This way, anywhere "posts" was referenced in the component, it will still work just as before! :D

[JimmyCheng]

Awesome contents Dave, really enjoyed this video. The way you presented it is far better than most other YouTubers out there who simply give you the optimal solution right away and copy and paste from a pre-written script top down. Here we get to see the whole "evolving" process, which helps our understanding of the whole topic much much more. Good Job!

[bensjostrom]

Great content, Dave. This react series is the fantastic. useContext is my favorite new hook!

[andrewclarke]

Yay! You refactored thanks to the Context api. I was getting really worried at how bloated that App.js file was becoming because of only using props.

[ahmad-murery]

Refactoring is the most cool thing in development (I think) where sometimes you change a lot of your code (for better) without affecting UI,
unfortunately it might be underestimated from a client point of view as it seems as nothing have been changed to them,

Thanks Dave,

[Pareshbpatel]

Refactoring code to take advantage of Context API and the useContext hook, so clearly explained. Thank you, Dave

{2022-03-22}, {2023-11-03}

[ellydiallo]

This help me so much.. i had to display multer for pictures but's quit the same way exept few details..Anyway you're an hero. <3 ! thx a lot.

[fkbey]

thank you for your clear english and great tutorial.

[fxoujhk]

This video was very helpful. Thanks for sharing!

[MH-dijb]

This is well explained for me, and absolutely great helpful to my learning....Thank You👍

[bjornhellgate]

Hey Dave, is there any reason to not put api, format, and useNavigate (formally useHistory) through the datacontext instead of importing them in every component?

[elinordeniz]

Hi Dave, I have a question. What if we have a button once its clicked buttonClicked() function runs and it uses the "data" variable from useAxiosFetch hook. Its placed in DataContext.js file right below useAxiosFetch hook. Once the button is clicked just before data is set in the axios hook, it gives error because data variable is empty. Even the buttonClicked() function is async I cannot find a way to await data from axios hook. Even I make them all async await in the function, it didnt work. I even use useReducer in the hook for data await, and we cannot make custom hooks async await. How can I fix this? Thanks

[oussemabouyahia]

please if i clearly understood useContext can replace passing props down and clean our code ? also with this method, do we will not need lifting up the state anymore? other than that really perfect content especially how you play between componenets and props, it is a good method to manage our app with confidence and expertise

[designcoded]

sir your efforts are highly appreciateable please do do the series with non project format explain the hooks concept with little codes so the beginners can understand quickly i noticed you are doing in project format actually it seems to be like call back hell in beginners perspective, i really spent 1 hrs 30 minus only for learning hooks concepts, your single video itself more than 30 minutes, any how really thanks for making video, by the way its just a giid critic to make your content good, you can explain hooks fastly clearly with small codes than these type of project, so later you can make project series based on them

[ivanfrey]

I think I was unsure about how the DataContext and DataProvider talk to each other or are connected. But I believe it's like this: So we create the DataContext by simply saying: 'DataContext = createContext({})'; 

Then we create our data provider by saying: 'export const DataProvider = ({children}) => { 

}

But I think what went over my head or what you did not explicitly mention is this: Inside of the DataProvider function we return, and by returning the DataContext inside of this function (DataProvider), DataContext knows that the .Provider is the DataProvider function

(

)

So does React know that the function that contains the DataContext, in this case the DataProvider function, is the .Provider property that we declared above? Let me know if that makes sense.

[hadibohluli]

Hi Dave, I have a problem with useContext, React context loses the data in component on refresh page manually, I get data from Api and store with useReducer hook, when i click to see product info page it shows the data but when i refresh it does not get data from context . component gets id of product using useParam hook but not product data from context, and this happens only when go to info page of product not with other component, what do you suggest, Thank you for your great videos

[ChristianPrince-]

bro igot this error how do i solve it? Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: RevealBase