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

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
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.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a Learn React tutorial series playlist:
• React Tutorials
🔗 Project Source Code: github.com/gitdagray/react_co...
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:
reactjs.org/docs/hooks-rules....
🔗 Collections of Hooks:
nikgraf.github.io/react-hooks/
www.npmjs.com/package/react-use
🔗 Axios:
www.npmjs.com/package/axios
🔗 React Router:
reactrouter.com
🔗 JSON-Server:
www.npmjs.com/package/json-se...
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
🔗 Styled Components: styled-components.com/
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
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

[@DaveGrayTeachesCode]

In this tutorial, we learn how to stop drilling props down through components and instead we utilize the Context API and the useContext hook to pull the data we need directly into each component. if you are just starting out with React or seeing this tutorial first, you may want to start at the beginning of the Learn React tutorial series here: kzbin.info/aero/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

[@anknara1381]

You are a genius

[@DaveGrayTeachesCode]

@@anknara1381 You are too kind. Thank you 🙏

[@stevenbehm1]

Hi Dave, I have really appreciated your React tutorial and feel as though I have learned a lot from you. I am working on the context API video and it is 2022 post react router v6 release. I am having some trouble with understanding how to incorporate the context api correctly now that we have a different file setup when using Layout.js. Do you have any video/code that shows how you can use the context API with the newer version of react router while creating the blog app?

[@DaveGrayTeachesCode]

@@stevenbehm1 yes, search my channel for React Router and you will find the update for RRv6 which uses this same project 🚀

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

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏🙏

[@kitchenchem141]

Thank you thank you for these tutorials. I am new to web development and sat for days struggling with with errors in a never ending loop between my app and the react docs. Your videos helped me get up to speed so much more quickly thank I would've if left to my own methods.

[@bfmcoding4485]

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

[@DaveGrayTeachesCode]

You're welcome! 💯

[@TheLucidway]

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.

[@DaveGrayTeachesCode]

You're welcome! I'm glad it helped 💯

[@JimmyCheng]

Awesome contents Dave, really enjoyed this video. The way you presented it is far better than most other KZbinrs 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!

[@DaveGrayTeachesCode]

Thank you, Jimmy! 💯

[@bensjostrom1185]

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

[@DaveGrayTeachesCode]

Thank you!

[@MH-di4jb]

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

[@DaveGrayTeachesCode]

You're welcome!

[@wealthiduwe5831]

Great content, thanks Dave

[@DaveGrayTeachesCode]

You're welcome! Thank you for watching 💯🙏

[@user-fx3ou2jh9k]

This video was very helpful. Thanks for sharing!

[@DaveGrayTeachesCode]

Glad to hear it helped!

[@Drakan21]

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

[@DaveGrayTeachesCode]

Great helpful share - thanks! 💯

[@fkbey5756]

thank you for your clear english and great tutorial.

[@DaveGrayTeachesCode]

You're welcome 🙏

[@thejeffkershner]

Great tutorial. I subscribed. Thanks!

[@DaveGrayTeachesCode]

You're welcome, Jeff! 🙏

[@thejeffkershner]

@@DaveGrayTeachesCode do you have a video on how to create a way to call APIs?

[@DaveGrayTeachesCode]

@@thejeffkershner yes, I do. In this React series, I have lessons on using Fetch and later on in the series, Axios. I do recommend learning Fetch in Vanilla JS first with this tutorial: kzbin.info/www/bejne/jJ60Z5d-q9N-f68

[@Sean-hd1bp]

You are an amazing teacher

[@DaveGrayTeachesCode]

I appreciate the kind words. Thank you! 🙏

[@ellydiallo1674]

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.

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@raypenha2572]

Great video!

[@DaveGrayTeachesCode]

Thanks!

[@maayancohen8518]

thank you so much!

[@DaveGrayTeachesCode]

You're welcome! 💯🙏

[@andrewclarke6916]

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.

[@DaveGrayTeachesCode]

Absolutely! Prop drilling is a great way for beginners to start but we've discovered the context API is better 💯🚀

[@nakllantada1166]

Thank you!!!

[@DaveGrayTeachesCode]

You're welcome!

[@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}

[@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,

[@DaveGrayTeachesCode]

Spot on, my friend. If it works, they typically want you to move on. Best to refactor before telling anyone it works! 😂 Thanks for comment Ahmad. 🙏

[@ahmad-murery]

​@@DaveGrayTeachesCode Looks good😁 , but now I need to find an excuse for the delay in delivery 🤔 Thanks for the great content Dave,

[@sonamohialdin3376]

So good tutorial

[@DaveGrayTeachesCode]

Thank you, Sona! 🙏

[@rangabharath4253]

Awesome

[@DaveGrayTeachesCode]

Thank you! 🙏😀

[@bjornhellgate3985]

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

[@designcoded7585]

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

[@DaveGrayTeachesCode]

Thanks for your feedback. I may eventually make short videos on hooks as you are suggesting. I'm nearing the end of this series now so I will complete it first. Thanks for watching! 🙂🚀

[@designcoded7585]

@@DaveGrayTeachesCode thanks sir you are doing a great job

[@hamzalaabidi9448]

🎉🎉🎉🎉 magnificent

[@DaveGrayTeachesCode]

Thank you!

[@oussemabouyahia474]

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

[@DaveGrayTeachesCode]

It sounds like you are understanding it. If you create state for just one component, it is ok to keep using useState in that component. If you need to share state between components, useContext helps.

[@victor_h9925]

Hi Dave, really appriciate the videos. But what is really the advantage of using this? :D Thanks.

[@DaveGrayTeachesCode]

It helps you avoid drilling props through multiple components. This can become cumbersome especially when the intermediate components do not need the props that are being drilled.

[@victor_h9925]

@@DaveGrayTeachesCode Thank you for the clear explanation as always Dave 😀

[@harag9]

Great tutorial. Looking forward to more. Do you have any tutorials on "Testing". I've recently been moved to a react project at work (and know nothing about react, hence the tutorials). However I notice a load of files with the name "xxxx.test.jsx" in them and then lines like describe("Home Page", ()=>{ it("should do x", ()=> { render (...); expect(x).toHaveTextContent("...."). Any tutorials on what I'm suppose to do with these?

[@DaveGrayTeachesCode]

I do not, but testing is one topic I want to cover yet this year.

[@harag9]

@@DaveGrayTeachesCode :( Would love to see those when you do them, You have a great way of teaching and easy to follow. Thanks for all so far.

[@hadibohluli5207]

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

[@DaveGrayTeachesCode]

React apps are SPAs = single page applications. When you reload / refresh, you are restarting the application. A reload / refresh erases the current state of your application. We use React Router to simulate navigating to different pages on the web while maintaining the app state.

[@hadibohluli5207]

@@DaveGrayTeachesCode thank you for help, for solving this should we send some of data through props? i just need a tip to go and study about it

[@ivanfrey6323]

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 ( {children} ) 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.

[@DaveGrayTeachesCode]

Each context we create has it's own provider property. We can have more than one context per app if we want. Likewise, we can use the provider to provide the context to all of the app (as you see in this example) or maybe just part of an app. For example, an account settings context may provide data that is only needed in a specific part of the app. {children} references all components inside the provider. We wrap the provider around the part of the app we want to provide the context to. You see this in the App.js for this example. I hope this helps. 💯

[@ivanfrey6323]

@@DaveGrayTeachesCode That makes sense David, thanks for the reply. But as confirmation, the function that returns the context is the function that will be the .Provider correct? Like in the code below, DataContext is returned inside of DataProvider, therefore DataContext knows that it's .Provider is the DataProvider function? const DataContext = createContext({}); export const DataProvider = ({children}) => { const [posts, setPosts] = useState([]); const [search, setSearch] = useState(''); const [searchResults, setSearchResults] = useState([]); const [postTitle, setPostTitle] = useState(''); const [editTitle, setEditTitle] = useState(''); const [postBody, setPostBody] = useState(''); const [editBody, setEditBody] = useState(''); const navigate = useNavigate(); const {width} = useWindowSize(); return ( {children} ) }

[@somebody-17546]

Can you make typescript course with reactjs

[@DaveGrayTeachesCode]

I do plan to cover Typescript in the near future 💯🚀

[@franalcaraz1676]

As Radiohead song says, Everything In Its Right Place ;)

[@ChristianPrince-1]

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

[@DaveGrayTeachesCode]

Hmm, I haven't seen that and don't think I was using RevealBase in this tutorial - but a dependency may be. Sounds like you could either not use strict-mode or update the component they suggest you update.

[@Haydarnt8]

وردة

[@quasi_verum]

Refactoring one tedious work in programming.

[@adarshrathi8265]

you teaching method is soo hard , too much complicated you are excellent , not good teaching way {you made redux toolkit project in next js}