How To Use React Context API In Version 19 Of React Using use() Hook

in this video we will see how to use react context API in version 19 of react version 19 of react makes the react context code a bit simpler than the previous version of react to demonstrate that I have this full stack link sharing application here once I select any image it immediately reflects on the left side section also for that I'm using context API so this is the data provider component component which is using the data context this component is returning the data context. provider and the user selected image is stored in the profile image state so for that I'm passing this update profile image function as well as profile image State value this code is for react version 18 so let me open the package.json file as you can see we're using react Dom version 18 and also react version 18 now let's install the react 19 beta version for that you can scroll to the end of this page click on this react 19 beta upgrade guide if you scroll down you can see the installation instruction so we need to install react at beta and react Dom at beta I can say yarn add you can also use npm install instead of yarn ad if you want now you can see react beta and react Dom beta version is installed now let me restart the application note that with this version 19 the previous syntax of using context API is still valid and you will not get any error so if I refresh the page and check the console you can see it still works and we're not getting any errors now with version 19 of react we can simplify this code instead of using data context. provider we can just use data context so this is the data context we have created you can also call it just data instead of data context if you want but I find data context more explicit to use so with version 19 you don't need to add provider while providing the value prop and wherever you're using the use context hook instead of the use context hook you need to use the use hook imported from react this Hook is available only if you're using version 19 of react now instead of use context hook I will just use the use hook and provide the same data context that's it now let me restart the application to verify there are no errors and if I refresh the page you can see there is no error in the console now let me try changing the image you can see the left side image is correctly getting changed which means the new use Hook is correctly working with context API so that's it for this video if you want to learn M Stack from scratch and learn how to build and deploy this beautiful full stack link sharing application using mer stack then check out the link in the description so that's it for this video if you found this video useful do like it and don't forget to subscribe to the channel

Channel: Coding Mastery

Views: 201

Keywords:

Id: -E2PrgglmR0

Length: 3min 33sec (213 seconds)

Published: Sat May 04 2024