React State Management Tutorial | Context Api | React Tutorial For Beginners

[@nepalcodetv6298]

pass props is not main problem for using state management it is event handling to delete ,add, create,change etc.. to parent component having state . Great Content. Thank You

[@developedbyed]

Correct! Should've made that a bit more clear! My bad!

[@blasttrash]

pass props is definitely a problem. It might seem a problem if you are only passing it one level down. But what if you have to pass a prop all the way down 50 levels to some grandchild in the dom tree? or what if you have to pass it a node that's 50 siblings away in the dom tree? State mgmt solves that problem as well by centralizing this. This is the reason we have mapStateToProps as 1st argument in connect method of react-redux.

[@atulchavhan8003]

Is this a full time replacement for redux or lack some/many features?

[@mikecurry6847]

@@atulchavhan8003 definitely not a replacement but sometimes redux may be a bit overkill. In the end of the video he mentions the main drawback to the usecontext, each element who has it will rerender upon state change, which might not be the best thing for a giant application

[@markokafor7432]

@@developedbyed please do you have another video explaining what he said. i am getting state from an add to cart button. i cant just copy state and paste in addToCartContext.js. I have to pass it from child to parent

[@maciejziemichod37]

this guy is a brilliant and hilarious teacher at the same time, I love it

[@popoduck8309]

Moi Aussie, mon Ami 😀

[@jani14jani]

If you are already familiar with React and came to this video for the Context API & Hooks start watching at 14:00. If you are still a beginner in React start at 0:00.

[@hchchc948]

Came down here to comment this after I skimmed through 14 minutes...that's why you always check the comments first

[@aammssaamm]

Thanks, this silly guy worries about music more than about his one presentation time codes.

[@sarunmaharjan2508]

@@hchchc948 Tip: always watch tutorial videos 2x playback speed

[@SergioArroyoSailing]

@@sarunmaharjan2508 same. I try to give tutorials a quick scan through first so I know whats coming. Then I can focus on the sections I really want

[@sudhanshumarimganti4694]

Ahhhh! I read your comment after watching the whole video! That's how good Ed is!

[@suchanachakrabarti6783]

Finally, I got a clear picture of context API which I have been struggling to learn for long. Thankyou for this awesome tutorial.

[@vijaykumarreddyalavala3713]

This one is among the fewest videos on KZbin that actually explains why State management is important.

[@TheSaintsVEVO]

And apparently the explanation is wrong according to the pinned comment

[@kartik4152]

@@TheSaintsVEVO the explanation isn't *wrong* , its just a matter of what problem you want to tackle.

[@shivanigaddagimath6105]

Hey! Are you studying or working currently? Are you open to internship/job opportunities?

[@sudarshan_savvy]

I just love, when someone first explain the problem and before teaching the solution, and he did the same.. I just love the way he clearly explains the things. best

[@willd0g]

Thanks Ed, this was really helpful. Especially the way you stepped first through the rudimentary approach before introducing the more sophisticated way whilst adding just the right amount of complexity at each layer. The logical flow of the presentation was really great.

[@eddiechen6389]

Oh gosh!!! I like how u showed us the problem and then showed us the solution later on, to the point!!! YOU ARE GOOD!!

[@asharma741]

No simplest little project like this on the internet on context api. I am trying for first time and I got it!. Many thanks to you my best friend. Your tutorials are really effective.

[@mr.RAND5584]

Re render all props. I think that is the purpose of it. To distribute all the data to components. Like authentication, themes, current user... Awesome tutorials. Crystal clear. No indian accent. Big font code.

[@ozzyfromspace]

I've been watching this (and other related videos) over and over for about half a week now. I've also been working on a beginner game in react and trying to use hooks the right way. Every time I try, my code looks better and I understand React that much better. Thank you for making your videos publicly available, Dev Ed! You're a real one 🏆🤓🙌🏽☺️🔥

[@raphael4515]

Finally someone explaining how to use Context between different files. Thank you for this!

[@punithsharon9610]

I saw a bunch of videos trying to understand this concept. And your video is the only one that made it so simple to understand this concept. Breaking the video into problems and providing solutions to them makes the concept crystal clear. You are an amazing teacher. Thank You so much.

[@rahulbhatia4246]

Possibly the best explanation of contextapi on youtube.

[@arbobmehmood5831]

Best tutorial on Context API period. All other youtubers are teaching like people already know what context api is. This is the only one which teaches from scratch. Loved it. That's why you are my favorite webdev youtuber.

[@syedittyhadulislam1276]

A few days ago I was scared of the context API. After watching the video, the fear is over. Thanks man. I appreciate your teaching style... Now I'm one of the new subscriber on your channel.

[@stephenoj5384]

I have read the official React docs on the context API but it wasn't all clear still until I went through this tutorial. Thanks Ed.

[@henrynkuke8445]

So far the best explanation i've come across about the contextApi

[@nicopicco]

This video is over 2 years old, but....by far it is the best on this topic. I absolutely love that Ed describes the issue/problem in detail to understand what is being fixed. Thanks Ed.

[@mahirvahmad2149]

After watching many videos about Context API finally I got clear idea about useContext. Thanks a ton !!!!

[@matheuscardoso1]

You have no idea how grateful I am for your videos, man... When I searched for Context API and found this one, I was like "Thanks God I'm finally going to understand that!". I was not mistaken by the way. Yet another time, thanks for saving my life.

[@alexmercer5870]

I love how ed keeps smiling and that makes the content more friendly ! Love ed! Good vibes ❤️

[@ayush612]

1000+ likes 9 dislikes. implying, helpful to the 99% who watched. Speaks for the quality of the content! Thank you Sir!

[@irriet2]

This was the clearest explanation I've seen so far. Thank you, I can finally use it on my own.

[@benediktlantsoght1706]

Oh Captain, My Captain! A deep and sincere "THANK YOU"

[@vishsingh7235]

This video and your React Router video both helped me through projects that I was having a hard time with. Your teaching style is so reassuring and fun. You've become my favorite online dev. I'm going to purchase your Creative JavaScript course because I'm focusing on JS and React right now. Later down the line, I'll probably grab your HTML/CSS one too, just to shore up any holes in my knowledge. Please consider making a React course. I know in another video you said you're going to transition to C# and game development, but I'm sure people would love a React course from you.

[@alionamarshall1355]

Vish Singh 100% I agree with you. Please give us a react course Ed. Please 🙏❤️

[@writersocean9347]

I am just a beginner in react and state management ,was facing a lot of problems in prop drilling ,thank you so much for teaching this technique, helped me a lot:)

[@Usurperhk]

Best tutorial on context hooks. The documentation to this topic should point to this video!

[@emmanuelakogwu720]

What would I have done without this channel ? THANK YOU !!

[@Toffe]

After binge watching random redux tutorials and trying to understand its implementation, this is heaven sent. IMHO react context API is much easier to understand and implement for beginners like me, Thank you very much for your very concise and well-executed tutorial video.

[@aimeej2191]

For real... I will go through hours of lesson content with no luck, come here and everything finally clicks

[@MeAsMeButMe]

Ed, you're an exceptional teacher! Thanks a lot for the video!

[@lt5056]

the best teacher ever, make things easy to understand

[@tgtib]

I am learning more in a few minutes on KZbin with Dev Ed than in the long 4 months course I've attended for learn React, ehehehe. Great teacher.

[@ashkan9747]

you are explaining the most complex things in the simplest way and that is awesome thank you very much very very nice tutorial.

[@aerial216]

Thanks a lot Ed. Seeing you smiling is like also making us learning Coding is fun.

[@ashishchourasia2830]

The first thing I do after clicking the thumbnail of the video is to like the video; cause I am sure the video is gonna be awesome!!!

[@leanblue2010]

THIS GUY SAVED MY WHOLE PROJECT lol

[@RaajKanchan]

Thank You Dev Ed, you made the concept very simple to understand. I would recommend the video to every beginners.

[@calvincrane]

The docs fall short (for normal lesser folk people like me). So thank you for this ed. Only way I got this to work. It feels like a very clunky implementation at first but I can see down the line it makes sense. One thing I did have to do more on was the hooks and updating the state for my own purposes. In yours it was setMovies which confused me as I didn't get where it was set. But I see it's the second argument for these functions like setState and useState and useContext. I'm using context like a whole App Model MVC. See how that goes. Anyway great channel. and love the humour.

[@Dimlutube]

Hi Ed. I just wanted you to know that I appreciate how well you explain how everything works. Please keep up the great work!

[@RickBeacham]

Wow you make React easy and fun. Great teaching and I like your humor.

[@birenjung]

felt so grateful for this amazing explanation of use context

[@candleswilam]

so clear explanation, i like your way of teaching code with fun , make it interesting and not boring , thank you so much

[@adarshpandey2978]

Thank you Ed! you never let me down. Thank you for everything. Love from India ❤❤❤

[@shivanigaddagimath6105]

Hey Adarsh! Where in India are you based currently? Are you open to internship/job opportunities?

[@decoco885]

You're tutorials are awesome, thank you! Can you do something on submitting form data to API endpoints for CRUD functionality?

[@lestaironblack1259]

Your*

[@mataspigaga]

This was fantastic. I went through a 40 hour course on React and watching the first 15 minutes of this really made the concepts sink in on how it all works simply

[@zaratejavierjz]

please make more React videos. You are the only person who explains it well enough.

[@PhantomCurve]

Thank you so much for this! Was having a hard time understanding how context truly functions and this really made things much clearer.

[@lucastvms]

Man, you are brilliant, for real! Thanks for the video!

[@prithwirajdutta3827]

Excellent ed you just created the best react context API tutorial in the world.

[@natalieacevedo4575]

best programming teacher of youtube!, thanks so much for making such great videos!

[@temzeks]

Watched two times and i think i understand it now. Watched the video along with Dave ceddias react book. filled up the black holes pretty well! Ty

[@alexph4833]

I'm so happy because i'm learning React and english at the same time, and it feels so good when you understand both things. Thank you Ed.

[@ankurharna1]

Thank you.. thank you... Great Content. I really like the way use explain things and not keep the attitude "you must be knowing this"..

[@developedbyed]

Thank you! Trust me I don't know a lot of things either 😂

[@ankurharna1]

@@developedbyed Same here... 😉

[@coskuncabuk3119]

@@developedbyed Do you have the CSS code for this video?

[@BM-uf4pp]

possibly the best video on context api

[@fagnerdossantosgoncalves9563]

Awesome video! you have authentication example with same idea using context api?

[@jinyoucheng8114]

I am commenting on the 771th. It couldn't be better. Awesome & clear & kind explanation.

[@jorisw_]

Tiny note about the "..." spread operator: It doesn't copy the movie list array, it _deconstructs_ it into the separate items _from_ that array, and inserts (spreads) them where you put the ... in your new array. Much like const { this, that } = foo deconstructs this and that from the foo object.

[@bordsUK]

Bruh... this is easy to digest you deserve a thunder clap 👏

[@MrNimbus3000]

Thank you! Thanks to this video I saw really useful features and approach of using Context which was not covered in the original documentation. You are rock!!!

[@NikitaLipkanov]

"Hello everybody. In this episode we are gonna... go deeper.. that doesnt sound good.." - a few seconds into the video and already there is dirty joke ;D. Great content!

[@rodrickndhlovu178]

Dev Ed, Thanks a lot for your tutorials. You just dont know how much I'm learning from you.. I hope youtube is paying you enough mate coz I'm sure that I speak on behalf of many when I say that you manage to walk us thru the tutorials step by step in an understandable manner!

[@sk_the_engineer_guy]

Your video's fist 5 seconds earned you an subscriber..!!

[@fernandosalas4885]

Best explanation ever about Context API.

[@abhisekmohanty7386]

I genuinely feel u should make more videos on the MERN stack...loved your teaching style...CHEERS

[@pantelisvasileiadis2858]

Ed: It's gonna make sense,in just a bit, I promise Me: Okay then, I will await for it

[@consoledoterror971]

you have to async first.

[@kulukulu8931]

@@consoledoterror971 Good catch!

[@yannickstreicher4557]

Dude your tutorial is very well structured and the way you show the code is very clear and calming! Good Job :)

[@nmrfahmi]

I love the way you teaching, it's fun. I think i'm gone turn on the notification for the another videos. Great job

[@tariqmors7658]

Super good and clear explanations for beginners, that you present the problem in common use case and provide the solution to it.

[@shivamsrivastava457]

From what age you started coding bro???? Because you are of my age and you know so much in different technologies.....Hats off

[@uttamshrestha6370]

I get a positive vibe while I was your tutorial gorgeous man. Keep making content I love your videos.💖

[@AntonyAllocious]

Your way of teaching is awesome, Please increase the font-size in VC, Hard to watch it for some eye deficiency user like me. This is my suggestion. Please consider yourself

[@pasinduwewegama8870]

Love how you explain the problem along with the solution. Very articulate!

[@CesarGonzalez-np2oe]

Thanks for the video Ed! Was having a hard time understanding Context for a long time, read the React docs and information from more React experts but all seemed so complex but thanks for the way you explain the concepts so easy made it all click!!

[@praveenprajapati2229]

Its the best video on Context-API i ever seen.

[@pedroelton7040]

That's why we love you... Dimitri De Marco!

[@L1fe361]

Great tutorial. Why would I need to use Redux if we have the Context API built into React?

[@iagobontempocosta]

You set free from redux!! They do the same thing.

[@kidalikevin1676]

As you have heard, we have a down side to this, re-rendering of all components encapsulated, contrary to how redux handles the state change. Though it is a good api to use but with care of some kind on your implementation, know when to use.

[@lavish3683]

very useful concept , Explained in a very nice way

[@lawsonteyi3821]

I wish my school teachers were like this man!

[@pronayguha7099]

You are awesome . Almost slept after scratching my head for context then there you are

[@alannguyen4441]

Thank you Ed Another tutorial that going straight to the point, and I like your style of giving the background issue and how to fix it.

[@renanrosa5527]

Such a crystal clear explanation. Thank you very much.

[@sougata2705]

Thanks... you just cleared the whole idea of context.

[@sepp4511]

Absolutely insane video man. I am working on my first bigger react native project and this was exactly what I was looking for, thank you so much!

[@jorisw_]

Nice and simple example, with nice clean code. FYI, the {" "} you saw, is your IDE noticing a space on that line, and assuming you meant to output a space to the DOM, as it was in a block of JSX. The only way to output actual spaces in JSX, instead of them being interpreted as meaningless white space by the browser, is the way your IDE completed for you: in a JSX string literal, {" "}. Peace!

[@richarddoci]

Amazing video! The context API gets everything done so easily! I do have one question though, when to use Redux over the Context API? I suppose it might have something to do with performance or something, but I don't really know. Also, I'm looking forward to your redux video! Thanks!

[@NaveensinglaYT]

Best explanation on the entire youtube

[@hino2]

You know when your brain starts to fail is when you type "const React". Also, nice vid!

[@siamahmed8287]

I have a question. At the beginning where you were rendering the movie names in after that you wanted to change them into h3. Instead of just changing the tag why do we need to have to go such a long way?

[@medicateddramaqueen0]

I'm obsessed with your color theme, which one are you using?

[@btc_only]

I'm just waiting for a answer

[@stevens.3343]

Thankssssssss Ed, youuu are the best tutor that I ever had..!! Even better than my newly bought Udemy courses ! For sure I'll donate you more once I'm success or getting hired in a good company.. I'll never forget what you had taught for me, if I become success one day, its also because of you !

[@voodkachannel]

What a setup! That's a good change. Love the tutorial, got kind of addicted, peace!

[@tim.bogdanov]

exactly what i needed. quick q, wouldnt it make more sense to just wrap the app component in index.js root?

[@ibrahimyakupaydn]

Explanation was great ! Thank you so much , really helpful and clear.

[@subramanyam.d24m56]

Thanks for explaining in a simple way.

[@kronykus]

Tip for mapping arrays and needing a unique key, which isn't always readily available: npm install (or yarn add) uuid then in the file: import uuid from 'uuid'; then when you're mapping do: key={ uuid.v4() }

[@BrainWavesVillain]

Thank you, you are helping a lot of people and you are the best explainer. :)

[@Glorygloryutd]

Thank you. Simple, to the point. Subscribed.

[@DasomWon]

YOU ARE AMAZING! I love your problem-solving approaching.