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: kzfaq.info/sun/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp
@anknara13812 жыл бұрын
You are a genius
@DaveGrayTeachesCode2 жыл бұрын
@@anknara1381 You are too kind. Thank you 🙏
@stevenbehm12 жыл бұрын
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?
@DaveGrayTeachesCode2 жыл бұрын
@@stevenbehm1 yes, search my channel for React Router and you will find the update for RRv6 which uses this same project 🚀
@ikurbano2 жыл бұрын
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!
@DaveGrayTeachesCode2 жыл бұрын
Thank you for the kind words! 🙏🙏
@bfmcoding44852 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! 💯
@TheLucidWay2 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
You're welcome! I'm glad it helped 💯
@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.
@JimmyCheng2 жыл бұрын
Awesome contents Dave, really enjoyed this video. The way you presented it is far better than most other KZfaqrs 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!
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Jimmy! 💯
@Drakan212 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
Great helpful share - thanks! 💯
@bensjostrom1185 Жыл бұрын
Great content, Dave. This react series is the fantastic. useContext is my favorite new hook!
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@andrewclarke69163 жыл бұрын
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.
@DaveGrayTeachesCode3 жыл бұрын
Absolutely! Prop drilling is a great way for beginners to start but we've discovered the context API is better 💯🚀
@ahmad-murery3 жыл бұрын
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,
@DaveGrayTeachesCode3 жыл бұрын
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-murery3 жыл бұрын
@@DaveGrayTeachesCode Looks good😁 , but now I need to find an excuse for the delay in delivery 🤔 Thanks for the great content Dave,
@ellydiallo16742 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
Glad it helped! 💯
@fkbey57562 жыл бұрын
thank you for your clear english and great tutorial.
@DaveGrayTeachesCode2 жыл бұрын
You're welcome 🙏
@MH-di4jb2 жыл бұрын
This is well explained for me, and absolutely great helpful to my learning....Thank You👍
@DaveGrayTeachesCode2 жыл бұрын
You're welcome!
@user-fx3ou2jh9k Жыл бұрын
This video was very helpful. Thanks for sharing!
@DaveGrayTeachesCode Жыл бұрын
Glad to hear it helped!
@Pareshbpatel10 ай бұрын
Refactoring code to take advantage of Context API and the useContext hook, so clearly explained. Thank you, Dave {2022-03-22}, {2023-11-03}
@wealthiduwe58313 жыл бұрын
Great content, thanks Dave
@DaveGrayTeachesCode3 жыл бұрын
You're welcome! Thank you for watching 💯🙏
@Sean-hd1bp2 жыл бұрын
You are an amazing teacher
@DaveGrayTeachesCode2 жыл бұрын
I appreciate the kind words. Thank you! 🙏
@bjornhellgate39857 ай бұрын
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?
@designcoded75853 жыл бұрын
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
@DaveGrayTeachesCode3 жыл бұрын
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! 🙂🚀
@designcoded75853 жыл бұрын
@@DaveGrayTeachesCode thanks sir you are doing a great job
@thejeffkershner2 жыл бұрын
Great tutorial. I subscribed. Thanks!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome, Jeff! 🙏
@thejeffkershner2 жыл бұрын
@@DaveGrayTeachesCode do you have a video on how to create a way to call APIs?
@DaveGrayTeachesCode2 жыл бұрын
@@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: kzfaq.info/get/bejne/jNOBacd529SveYE.html
@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.
@raypenha25722 жыл бұрын
Great video!
@DaveGrayTeachesCode2 жыл бұрын
Thanks!
@maayancohen85183 жыл бұрын
thank you so much!
@DaveGrayTeachesCode3 жыл бұрын
You're welcome! 💯🙏
@ivanfrey63232 жыл бұрын
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.
@DaveGrayTeachesCode2 жыл бұрын
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. 💯
@ivanfrey63232 жыл бұрын
@@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} ) }
@nakllantada11662 жыл бұрын
Thank you!!!
@DaveGrayTeachesCode2 жыл бұрын
You're welcome!
@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
@sonamohialdin33762 жыл бұрын
So good tutorial
@DaveGrayTeachesCode2 жыл бұрын
Thank you, Sona! 🙏
@hamzalaabidi9448 Жыл бұрын
🎉🎉🎉🎉 magnificent
@DaveGrayTeachesCode Жыл бұрын
Thank you!
@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
@somebody-175462 жыл бұрын
Can you make typescript course with reactjs
@DaveGrayTeachesCode2 жыл бұрын
I do plan to cover Typescript in the near future 💯🚀
@victor_h99253 жыл бұрын
Hi Dave, really appriciate the videos. But what is really the advantage of using this? :D Thanks.
@DaveGrayTeachesCode3 жыл бұрын
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_h99253 жыл бұрын
@@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.
@rangabharath42533 жыл бұрын
Awesome
@DaveGrayTeachesCode3 жыл бұрын
Thank you! 🙏😀
@ChristianPrince-12 жыл бұрын
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
@DaveGrayTeachesCode2 жыл бұрын
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.
@franalcaraz16768 ай бұрын
As Radiohead song says, Everything In Its Right Place ;)
@Haydarnt8 Жыл бұрын
وردة
@quasi_verum Жыл бұрын
Refactoring one tedious work in programming.
@aservantofjesuschrist6911Ай бұрын
For what shall it profit a man, if he shall gain the whole world, and lose his own soul? Or what shall a man give in exchange for his soul? Whosoever believeth in Jesus Christ should not perish, but have everlasting life.
@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}