Context API Tutorial For Beginners - Using React Hooks
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- In this video I will teach you guys how to use the Context API for State Management in React. We will be using the CreateContext and UseContext hooks to create a context allowing us to manage different states in a React Application.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
Context API
UseContext
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
Thanks for creating this video straight to the point, I was able to implement context in my project in just a few minutes.
Glad you liked it :)
@@PedroTechnologies Thanks bro you saved my time your method of explaining is fantastic
Thanks "SIR", This was the best explanation I found after searching all day....Thank you so much Pedro❤️
This is absolutely, beyond a shadow of a doubt, the best explanation of this on TH-cam.
Thank you for helping me understand it completely in 10 minutes.
Why do you need showProfile or setShowProfile when you are setting a username? If a username exists then that means you are logged in
For once I finally understood and implemented context API...you explain so easily and straight to the point, with points to take. Thank you
On point thanks man!!
To sum up :
1. create a context.js for a particular group of children who want to access (or share) same states
2. import that context in parent of those grouped components (by grouped components i mean the children who are going to share same states without "prop digging")
3. provide values for that context which can be accessed by the children
4. To access in children destructure the object passed in provider and use useContext(contextName) to get the object passed in the provider
whoooo this ends the summary that i have learnt from this video!!😊
to all the different siblings ☺
Good video though when I refresh the page it will not work. What I expect is to see profile after I login and refresh. More information required for this video to be useful
In react when you refresh the page all the states will reset. If you want to maintain the information after refresh it has nothing to do with the context api, but rather you have to save data into the local storage or cookies :)
you just saved me 1 hour of my life in 10minutes
I struggled so much to find someone explaining it with another example than just the theme example, and very clearly.. THANKS DUDE !!
damn mee too cant understand the white boys shit
Isnt it simpler to just pass those via props ? Much easier ?
Hey, you can pass states through props but that is very limited. Also, with the context api you don't need to pass each global state as a prop to every single component. I believe context api is much easier to work with!
@@PedroTechnologies isnt redux doing the same thing ?
a little bit confusing I don't know why after all I have done I still have a blank page
Great tutorial! Getting straight to the point was super helpful in understanding it better and easier.
Good explanation of how to use the Context API!
Beginners should know that this may not be the best example for when you should utilize Context. Since this example requires lifting up the username and showProfile states only one level, it would be more straightforward to pass the necessary state and setState functions from the App component level to the Profile and Login components as props than to use context.
I enjoyed the content nonetheless. Thanks Pedro.
Bro you need to speak slow. you mix up alot of things in between, making us even more confused.
best explanation , simplest , clearest, absolutely best. Thank you so much !
Thanks, that was really helpful! I have a question though, can we create a context in a child component and pass it to other sibling components?
Thank you! You can't do that, all context states must be created on the parent component and wrapped around the components you cant to have access to that state.
Use redux management
best explanation!! thank you !
Thanks for this clear explanation! I still feel there should be easier way to execute such a simple feature... I'm quite a noob with full stack/ web dev and don't know much about these but I'm questioning the value of learning React. It's not very intuitive and it seems to be quite complex and hard to learn, is it really worth putting in all the hours to learn to use it?
I got my job watching your tutorials ❤️ Thanks bro
Thanks, it's very helpful! can we get data from Axios and showing listing through context API. any video link would be very helpful...
You can create a context state and set its value equal to the result of the axios request
I do not know why you are so underrated , You content is amazing , to the point like it should be
Thanks for creating this video straight to the point. Such a great tutorial 👏🏻
Excellent explanation, thank you for sharing!!!
Thank you a lot! A great tutorial, straight to the point, and easy to understand. I admire your simple way of explaining it. I always find it difficult to understand it.
useContext +useReducer =🧨🧨
Might make a video using useReducer too!
why do we use this ? we can also just pass them as prop
This is meant to organize your project. For example, in a large project you might have several components inside of each other, therefore you would have to pass a prop inside of each of those components.
Why do you have 5K Changed files?????
Loll, it started with my first video lik 4 years ago. I didn't think it would matter so i didn't set up my git repo properly. Now its a running joke on the channel
Another wonderful video..just to the point..no nonsense blabla! Really appreciated!
Thank you very much for this tutorial. You simplified it to my best understaniding.
Nice, then what is the difference between sharing the state with the context API and sending the state as props to the childs?
thank u so much bro i understand working concept of context api in 10 minutes
And another question, when would it be convenient using Context and when using Redux? Thank you so much!
I would say context api is good for simple / intermediate projects and smaller component groups in big projects
Very clear explanation. Thank you for this video.
good vid dude appreciate
Pedro simplifies any programming concept as water what you need to do is to drink that water and quench your thirsty
brother, I have watch many tutorials on usecontext api. But this one your tutorial is so simple and short. and I get it. thank you
Glad to hear that!
Thank you! Finally I understood Context API. I just have a question, so all states should be saved in the App.js Component?
Glad you liked it! It depends, you can start your context states anywhere you want as long as it is a component and it is the component above the other components using the states in the component tree!
@@PedroTechnologies Thank you!
you are genius sir
Thank you lmaoo
The fact that you left no comment unanswered made me subscribe. Thanks for making this very simple and digestible KT video.
Thanks for the sub! Sometimes I get caught up with work and am unable to answer some, glad on this one I was able to answer everyone hahaha
Muito bem explicado! Fiquei curioso pelo nome do seu Canal e imaginei que fosse brasileiro, entrei na sua pagina do linkedin e pude confirmar que eh do BR e que tambem mora em Vancouver assim como eu. :)
To get same result with TypeScript you can define interface and add initial values:
export interface LoginContextInterface {
userName: string,
setUserName: (input: string) => void
setShowProfile: (input: boolean) => void
}
export const LoginContext = createContext({
userName: '',
setUserName: () => {},
setShowProfile: () => {},
});
Thank you so much bro, you saved my life
@@jainamshah7126 you're welcome! 👍
is the value prop like by default it has to be value can we use a different name for this?
Hi.. If we are using context to save authorisation datas like userName,userId,userRoles etc from the login API ..I am able to access the datas inside any component from the context state.. but if I reload the page every state data is lost... So what will be the solution to persist the data? Because I have to use userId etc in API calls in some of the pages and reload should not cause an issue..
Also if localstorage is a solution then is it secure? Because anyone can change the storage datas manually right?
You have to use the backend for this, and save your data in a database. Of course, local storage is not secure for this.
please by using useContext we will no longer need down the state to children components?
great explanation
Super tutorial! Thank yo you very much!) Found it to be very useful! +1 to your subs)
Glad it was helpful!
Thanks. I just don't understand that I can create this only using the props. Why do we need Context API for this? Do we use it because it is the only solution in more complicated code?
I believe when there are more complexity we prefer this
Thank you 🎉🎉
Good video sir! this and hitest choudhary video made my concept clear
great video but you should clear your 5k changes lol
Great video. I’ve literally just subscribed.
thnks bruh! it was much needed..i only got it from you
9 dislikes? the only thing I didn't understand throughout the tutorial. Good job man
Hahahaha really happy you liked the video!
This is absolutely, beyond a shadow of a doubt, the best explanation of this on TH-cam.
Thank you for helping me understand it completely in 10 minutes.
Why in the hell can't other youtubers be as straight forward as you ?????????????
What an amazing explanation, 💯👌
Your content is really good but the only thing that you may consider upgrading is your video quality. Please use high-res screen recorders. Other than amazing job. Keep it up!!
I was scaring by the name of context API before watching your video. Finally I've learned. Thanks Dear....
I understand it well. TQ for this awesome video
thanks, much easier to understand than redux :), gonna use it in my projects soon
Glad it helped!
dont know if anyone gives a shit but if you're bored like me during the covid times then you can stream all the new movies and series on InstaFlixxer. Been watching with my girlfriend recently xD
@@malikgordon9212 i dont knoe if you give a shit but i just reported your comment for spam haha
@Malik Gordon Yea, I have been watching on kaldrostream for months myself :)
@Malik Gordon Yea, I've been watching on KaldroStream for since november myself =)
I finally understood context API. Thanks!
Glad I could help :)
Thank u so much brother....the best explanation I got
Your videos are not only extremely helpful but also very inspiring to us brazilians as you might imagine. I'm glad to discover this channel! Valeus! =)
Happy to hear that! Vlww mano!
Can I know about editor font?
I would like to install that on my machine
Hey I use VsCode and the Andromeda theme
Ah nice is similar to CascadingParameters in Blazor.
Great video again, Pedro! This was explained so well!
Glad to hear that!
finally found a video which goes to the point directly without any unnecessary details, thanks man. I have a question: you have provided all username-setusername-setshowprofile to the children as parameter of LoginContext provider, lets think we have tens of values that need to be shared so do we have to write them all one by one as parameter ? Or is there anyother way like defining them in LoginContext.js etc. ?
its cool that i knew u were brazilian too by hearing your accent. Good work, man. Proud of your content
I liked the way you are teaching us. Awesome
This is the best explanation on context api so far. Short, Simple, with application. Super helpful ❤
Thank you I enjoyed the video, it's simple and clear ❤
Nice tutorial but it can be better if the logic was implemented in LoginContext file ;)
Thanks! That could be done too! I showed it being implemented in the App.js so it wouldn't be very confusing. I was scared that implementing it in the context file it would be hard to keep track of the states. But normally you ar right!
What does
{showProfile && {userName} }
Do bro?
Only today iam seeing this type of code...what will {showProfile} do here...Does it mean to check whether showprofile = true and then render the h1 with the username?
It means that if showProfile === true then show {userName} . Otherwise, not.
@@alimirhashimli2727 thanks bro
really ez to understand for low brain like me 😎
Do you have the github link for this code?
Thanks i think context hook is better then consumer ❤️
Aaah love context❤️
Love it too!
cool, thanks man! very helpful!
Thanks. it helps a lot, content is straight to the point
This is really great Pedro. thank you
To the point explanation. Thanks man
finally i got the concept of use context , thanks for explaining that easily.
Excellent clear and simple explanation man. Thanks! You got a new subscriber.
Great video man, watched it with breakfast and feel like i got a great understanding
this video was absolute POGGERS
how can I use context between more than 2 screens ???
This video has nicely explained the concept.
What a level of making someone understand topic of fear...... it was smooth by you.... thank you....
Amazing Tutorial Bro... You Got A new Sub.. Keep the good work up
Thank you. For this case, isn't it almost the same as prop drilling?
Very good onpoint no extra time compact tutorial
Best one I can understand from him well
This is what I need it. Thank you so much
I'm still using redux and class based component. Lol
Lmaoo There is nothing wrong with using redux (i prefere Context but redux is still important), but I recommend learning Hooks and functional components!
@Bryan Devsame thing how to do in redux please teach me
@@PedroTechnologies please teach this same one in redux
@@pavankumar4909 redux need more setup than context api. Just read redux docs and react-redux docs to set that up.
Thank you very much for this video. You clearly described how does Context API work and thanks to you, I was able to implement it in my project!
Every day you help me in different way, I recived my first task in my job that need to use context, im search in ytb, watch your video, and now I can continuous my task.
Very amazing video... Stuff explained far better than those big/famous youtube channels...
Thanks man, hopefully I will never have to use Redux again, btw just so that you know in our native language Hindi, "Machado" means "to rock", which kind of makes sense, because you always rock!
Hahaha thats awesome! My first name "Pedro" means rock in latin as well. So my name is rock to rock
such a good tutorial thank you so much!!!