No video

Mastering React Context: Do you NEED a state manager?

Context in React is a super valuable tool, but can it replace a state manager? Let's find out!
Daishi's Book: www.amazon.com/gp/product/180...
Code: github.com/jherr/mastering-co...
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
0:32 Project Setup
1:14 Prop Drilling
5:03 Context Using Prop Drilling
9:21 Multiple Contexts
10:38 Context Using useReducer
13:45 When To NOT Use Context
15:00 Context Versus State Managers
17:18 State Management With Zustand
22:13 Adding A Facade Layer
24:19 Fine-Grained Updates
25:38 Replacing Zustand With Context
29:37 When Context Updates Components
30:10 Context Using use-context-selector
32:40 Referential Identity Matters
35:03 Recommendations

Пікірлер: 270

  • @justine_chang39
    @justine_chang392 жыл бұрын

    honestly this channel is probably the best out there for deep dives into Typescript and React, love your content good sir

  • @tomascarignano5002

    @tomascarignano5002

    2 жыл бұрын

    Agree

  • @SterlingCobb

    @SterlingCobb

    2 жыл бұрын

    hey i’ve been following for a while now and this is solid. no gimmicks. pure education, learning and excellent content primarily focused in TS and JS +frameworks. would love to see Rust and wasam content integrated with js. excellent work. can’t wait to see your channel blow up beyond 100k.

  • @BillBakerB

    @BillBakerB

    2 жыл бұрын

    Great team advice too, even you know the libraries already, "What is easier to review?" is a helpful perspective.

  • @hanmingzheng5592

    @hanmingzheng5592

    2 жыл бұрын

    I was 2 videos and decide to subscribe. This channel got the real stuff compared to so many other KZreadrs pretending to be professional developers.

  • @Gruby7C1h

    @Gruby7C1h

    2 жыл бұрын

    True, this channel deserves to be much bigger - lots of knowledge and very good production quality.

  • @thatboyneedstherapy
    @thatboyneedstherapy2 жыл бұрын

    For my money, when it comes to getting these concepts across in an accessible way that goes beyond the superficial while avoiding being mired down, you are absolutely unbeatable. It's a fine line but you walk it expertly!

  • @danbacila5257
    @danbacila52572 жыл бұрын

    Amazing content, I have been following the channel for a while now. As a Junior dev I can say that this channel motivates me to dive deeper into concepts and try them out on my own in a series of little projects. Keep up the good work and high quality content, Jack!

  • @tiennsloit
    @tiennsloit Жыл бұрын

    I don't understand why youtube didn't recommend your channel to me earlier. This video is not only about mastering React context but also the way you refactor/repurpose the components for the use of context and other state managers. Thanks so much because I learn a lot from it.

  • @bythealphabet
    @bythealphabet2 жыл бұрын

    Love how you Made the comparison between Context and Zustand. I always use Context and didn’t see why I should consider other state management tools. Thank you Jack

  • @mostafasaffari3878
    @mostafasaffari38782 жыл бұрын

    These series of mastering are amazing, Thank you very much man, I have learned lots of things from you and I owe you a lot :)

  • @lucasishuman
    @lucasishuman2 жыл бұрын

    Incredibly clear and helpful demo. Please keep doing what you're doing. Your channel is by far the best I've found at showing both "the how" and "the why" of very specific and practical React + TypeScript in a very accessible way.

  • @Kahitar1
    @Kahitar1 Жыл бұрын

    Insanely good video. Perfect level of detail and nice comparison between the different options. I learned a lot from this.

  • @pendyaaa
    @pendyaaa2 жыл бұрын

    This is a really really awesome video. Way Way better than all those tutorial style videos which only is a regurgitation of documentation. This actually deepens my understanding and give me ability to judge new state management tools for myself

  • @AmodeusR
    @AmodeusR2 жыл бұрын

    It's really neat how you go building the example structure till you get on the topic of the video instead of already showing everything done and and explaining. I really liked that :D

  • @ogreeni
    @ogreeni Жыл бұрын

    Fantastic comprehensive overview! Love your videos Jack, been following you for a long time now.

  • @fadehelix
    @fadehelix2 жыл бұрын

    Thank you for this episode. In my personal ranking this is the best Context explanation I've ever seen

  • @tabliqatchi6696
    @tabliqatchi6696 Жыл бұрын

    Amazing video Jack, I really enjoy watching the way you write and talk about code. Your channel is absolutely phenomenal.

  • @shike769
    @shike7692 жыл бұрын

    Watched 2 of your videos. great content, very informative and very well edited. Thanks a lot for the effort

  • @siriusplayz5871
    @siriusplayz5871 Жыл бұрын

    WOW! I mean really WOW... You are such a GREAT teacher. Teaching with examples and passing down all that precious knowledge with such an ease. Brilliant. I'm a fan. First video I watch on your channel and I'm subbed forever. I just started learning React 2 months ago and this helps a looootttttt. Thank you sooooo much man. I'll keep coming back for more knowledge as I need to get a job very soon, hopefully.

  • @noccer
    @noccer2 жыл бұрын

    Terrific video, and very topical for my team at the moment as it would happen. Thank you as always ☘

  • @marksalsbery9826
    @marksalsbery9826 Жыл бұрын

    Another great video….it’s amazing how many little things I learn mixed in with the major topic stuff. Thank you! Also, you are a great salesman for Copilot…the more I watch you write code the more I want it!

  • @viyicciyiv
    @viyicciyiv7 ай бұрын

    Never really understood what context and Redux do, and you explain it so well with clear examples. Thank you!

  • @prathameshmali3888
    @prathameshmali38882 жыл бұрын

    The comparison is really good, especially with the profiler. Didn't know that context will make those many changes to the tree. Thank you Jack for the awesome video!

  • @braingamedotcom
    @braingamedotcom Жыл бұрын

    This is a high quality video with great content, something really refreshing on KZread! Thank you very much 🙏

  • @tonyg_nerd
    @tonyg_nerd Жыл бұрын

    There is a ton to digest here. Will be watching this many times. Thanks Jack!

  • @Kelz_369
    @Kelz_3692 жыл бұрын

    Wowww 👏 this is the most thorough explanation on state management I've come across on yt. Definitely sub to this channel. Thanks!

  • @AbdelhameedG
    @AbdelhameedG2 жыл бұрын

    Thank you, Jack, You have the best Front-end channel on YT. Keep it up.

  • @olyvar
    @olyvar9 ай бұрын

    So much great things covered in this video. Also a shout-out for passing the set state as a prop and using the callback to get the state value. I never thought of that before!

  • @universecode1101
    @universecode11012 жыл бұрын

    Mastering with the MASTER 🔥Every video is great, sometimes too much 😄, I mean I have seen the video even twice because you reach a high level, but with you Jack, I can improve my skills. Thanks ✌🏻

  • @jacobgoldenstreet6246
    @jacobgoldenstreet62462 жыл бұрын

    Wow. Fantastic tutorial. Your teaching is very clear. Super helpful. Thanks!

  • @petarkolev6928
    @petarkolev6928 Жыл бұрын

    Thank you for the wonderful video, Jack! I work in this industry for 5 years and yet I found all of your videos amazing and incredibly informative! All your videos are precious gems :) Only one thing I found a little bit hard to follow is the pace you go through your code in the editor. Personally, for me is a little bit hard to follow with that speed. May be for others is okay :) Thank you once again for the cool stuff you're showing to our fellow programmers :)

  • @yassinebi337
    @yassinebi3372 жыл бұрын

    Great video, I’ve learnt a lot from your youtube channel, keep up the great work. Greeting from Morocco.

  • @psychobuddha5379
    @psychobuddha5379 Жыл бұрын

    I am pretty impressed with how easy and clearly he manages to explain these concepts... Zustand sounds pretty interesting, I am definitely gonna try it.

  • @teerapatprommarak2070
    @teerapatprommarak20702 жыл бұрын

    This is really really GREAT content Jack, thank you!

  • @stevebob240
    @stevebob2402 жыл бұрын

    Exactly what I needed, still getting familiar with React and Next JS. Thanks!

  • @stefan9599
    @stefan95992 жыл бұрын

    Great content as always. Thank you Jack!

  • @mistersir3185
    @mistersir3185 Жыл бұрын

    Just when wet thought we don't deserve this a high quality educative content, you showed up and said we deserve it.

  • @parassharma7041
    @parassharma7041 Жыл бұрын

    I'm new to your channel, loving your videos great content and thank you for teaching with great easy way 😀

  • @okiirawan9578
    @okiirawan95782 жыл бұрын

    easy peasy lemon squeezy, thats the master said. Another very informative contents, so excited to watch your videos 🔥🔥🔥

  • @haquocviet9253
    @haquocviet92532 жыл бұрын

    Great content and easy to understand. Thank you so much

  • @tonystark4416
    @tonystark4416 Жыл бұрын

    Thanks! This was really helpful, even though I probably need to rewatch and read the docs a couple of times still

  • @igotbit9454
    @igotbit94542 жыл бұрын

    Love this channel!!!!!!!!!!! My go-to for React/JS stuff cause it covers more than just the basics which is what is needed in the real world env. Thx for the vids Jack!

  • @igotbit9454

    @igotbit9454

    2 жыл бұрын

    PS. these days i'm using Apollo Cache/Reactive variables to pass state around instead of React Context but React context is great too.

  • @marcelwopperer9776
    @marcelwopperer97762 жыл бұрын

    adding this facade layer is genious

  • @lancerdonnie
    @lancerdonnie2 жыл бұрын

    You really know your stuff. This is where I strive to be in the future

  • @HeinekenLasse
    @HeinekenLasse2 жыл бұрын

    Amazing video Jack, thanks for the effort

  • @Peter911
    @Peter9112 жыл бұрын

    Best in depth explanation and for free woow you are amazing .. Thank you

  • @spirostsakoulis797
    @spirostsakoulis797 Жыл бұрын

    Thank you so much for this great tutorial!

  • @sumitwadhwa8823
    @sumitwadhwa88232 жыл бұрын

    Even some of the paid content out there is not as impressive as your content sir. Thank you so much.

  • @bielgaucho_real
    @bielgaucho_real2 жыл бұрын

    I always asked why people use redux for everything, while they could achieve the same with context or simpler state management libs. This video is proof of it. Unfortunately using context takes a lot of care to avoid re-renders, but zustand demonstrate it can look simple and do the job.

  • @jherr

    @jherr

    2 жыл бұрын

    Just remember to make sure you use selectors with your zustand hook. :)

  • @garywaddell6309
    @garywaddell6309 Жыл бұрын

    Hey Jack I have been watching video after video of yours. I am still in my deep dive of React and MFE's so would be curious if you had a video on managing State / Context via Module Federation, specifically around JWTs and how to control flow in MFEs for valid / invalid sessions. I'll keep looking through your library but this video along with every video you make is so informative. Thanks for publishing such amazing content!!

  • @olabiranjoshua2860
    @olabiranjoshua28602 жыл бұрын

    This is such a rich content. Thanks for this Jack 👏🏽👏🏽👏🏽

  • @1Malak16
    @1Malak162 жыл бұрын

    Thank You! Briliant as always.

  • @Tarabass
    @Tarabass Жыл бұрын

    You did it again. I'm a developer for decades now and to be honest, I'm getting very annoyed by all those wanna be's out there. I'm trying to level up my knowledge about react (although I hate it) and every ninja is telling you to use context for global state. My guts feeling told me that is not a good idea. I don't want to rerender everything to update some fields. I even think that prop drilling is better. I follow your channel for a long time now and I'm glad you gave me the answers I was looking for. In a decent and professional way with proper knowledge and terminology. Thank you!

  • @orthostice
    @orthostice Жыл бұрын

    I think this video changed my life. Well, my frontend architecture but same thing right now.

  • @hamedmatari2577
    @hamedmatari2577 Жыл бұрын

    Finally I got the answer of this famous question, what is difference between redux and context. Your channel was always the best. I guess every body can find their question's answer in your channel. good to have you jack🤩

  • @javierjrueda1722
    @javierjrueda17222 жыл бұрын

    Thank you so much for this video. Really useful.

  • @JamesBond-mc7kl
    @JamesBond-mc7kl Жыл бұрын

    I just start career in React js and found the great video that is helpful for me

  • @rdubb77
    @rdubb77 Жыл бұрын

    In the dark and dangerous world of React over complexity you are beacon of understanding and hope

  • @farzadmf
    @farzadmf2 жыл бұрын

    VERY GOOD explanation, thank you!

  • @tarek_maza
    @tarek_maza Жыл бұрын

    An awesome resource for understanding state management in React!

  • @krazymeanie
    @krazymeanie2 жыл бұрын

    Bruh this channel is a blessing

  • @BensTechLab
    @BensTechLab2 жыл бұрын

    Let me just say what no one else notices… your video lighting and green screen setup is superb! 🙌 As a video guy I know this takes a bit of a setup/tweaking to get such a clean key without green spill around you.

  • @jherr

    @jherr

    2 жыл бұрын

    Thanks. I've been working on it and improving it over time. I think the most recent videos have been pretty solid.

  • @eddiedotdev
    @eddiedotdev Жыл бұрын

    What's funny to me is that I see this video after seeing the newer "Do you NEED context?" videos :D

  • @eleah2665
    @eleah26652 жыл бұрын

    The University of React State is back in session! Thanks Jack. I will want to get Mr. Kato's book.

  • @AwakeningofAI
    @AwakeningofAI2 жыл бұрын

    Thank you very much, sir. Great content.

  • @chrisprenn
    @chrisprenn2 жыл бұрын

    Awesome video thank you so much!

  • @ninabohm1535
    @ninabohm15354 ай бұрын

    Thanks Jack, very helpful!

  • @hristoenev6733
    @hristoenev67332 жыл бұрын

    Really good content! Thank you.

  • @trenthm
    @trenthm2 жыл бұрын

    Great video! Very educational

  • @armandsalle8447
    @armandsalle84472 жыл бұрын

    Really nice video! Thank you 🤯

  • @wisdomcube7789
    @wisdomcube77892 жыл бұрын

    Happy Valentines Day... also great content as always, thank you

  • @mateuszkulesza8528
    @mateuszkulesza8528 Жыл бұрын

    Great video, Zustand looks very promising

  • @prabhatsachdeva7747
    @prabhatsachdeva77472 жыл бұрын

    LOVING THIS MASTR SERIES 🖤

  • @karnellschultz6446
    @karnellschultz64462 жыл бұрын

    Great stuff as always

  • @heangly7449
    @heangly7449 Жыл бұрын

    Jack, you are so amazing. I would be so happy if you can create full stack web development course. I am sure many people (including me) are willing to pay for your course.

  • @sarthak1317
    @sarthak13175 ай бұрын

    thanks for the ecommerce example, adding it to the project section in my resume. A full fledged ecommerce app with login logout and add to cart functionality 😎

  • @sergeitinc
    @sergeitinc2 жыл бұрын

    Thank you so mush Jack!

  • @erindhoxha8607
    @erindhoxha86072 жыл бұрын

    Hi Jack, thanks for the great video, I've learned a ton. I have never heard of Zustand before and it seems very interesting for my future projects. Would you use it instead of redux?

  • @zoaybk
    @zoaybk2 жыл бұрын

    Amazing 🔥🔥🔥 thanks, as always

  • @apresthus87
    @apresthus872 жыл бұрын

    I used to use Redux (Redux toolkit to be precise) and it's still used for one of my active projects but in my latest project where I created my own CMS from scratch I used purely React Context for local state management and it was a very good experience. It's not like I dislike Redux toolkit (which is a pretty big upgrade on regular Redux imo when it comes to dev experience), but it was really nice to not have to put in a ton of dev time for the project on just state management.

  • @juanpasten6077
    @juanpasten6077 Жыл бұрын

    Thanks so much for create and share

  • @ounicohenrique
    @ounicohenrique2 жыл бұрын

    Great video, thanks.

  • @pHBonheur
    @pHBonheur2 жыл бұрын

    Amazing video! You are super enthusiastic when you speak, making your videos so great to watch. - @Jack What zsh extensions/setup do you use? Your auto completion and theme look really great! 👌

  • @jherr

    @jherr

    2 жыл бұрын

    Fig. Thanks for watching!

  • @maksym7279
    @maksym72792 жыл бұрын

    Great! Thanks!

  • @sumanth3036
    @sumanth30362 жыл бұрын

    You just dont stop at a superficial layer. Thanks a ton!!!!

  • @vijitail1979
    @vijitail1979 Жыл бұрын

    Hey Jack, great explanation as always! Just curious to know that when you used use-context-selector, why did the wrapper re-render?

  • @jakemetz1742
    @jakemetz1742 Жыл бұрын

    Always amazing content that’s prepared so well. Curious, what tools you use to make your videos? Would love to dem to my team in the same format

  • @jherr

    @jherr

    Жыл бұрын

    I use ScreenFlow to capture the screen. If I drew on the screen then I was using ScreenBrush and a commodity Gaomon drawing tablet. And then for post production I use the Adobe Suite. Honestly through, in most cases you could get by the just using ScreeFlow and a decent microphone.

  • @tombyrer1808
    @tombyrer18082 жыл бұрын

    Thanks for the deep but not too deep dive in the various state managers; will help my on my next project! Also thanks for the chapters. :)

  • @harvenius
    @harvenius2 жыл бұрын

    Your office environment is amazing.

  • @user-kt5jw2cd7e
    @user-kt5jw2cd7e2 жыл бұрын

    Thank you Jack

  • @Luxcium
    @Luxcium Жыл бұрын

    I have kind of learned HTML a thousand times over the years and skipped it because JS and CSS where so cool but HTML is so basic it is thought only to beginners I think you are the perfect person to teach us (i.e. We already know * "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites*) you must do an HTML tutorial for people who knows the basics and give us the advanced tools to master HTML in the context of React and with the minimal CSS or styling possible for it to be interesting but focusing only on HTML (in the context of React probably)… 😅😅😅😅 I would love to get my HTML certification 😉😌😜

  • @GusGabriel
    @GusGabriel2 жыл бұрын

    Amazing!!!

  • @kashnigahbaruda
    @kashnigahbaruda2 жыл бұрын

    Thanks!

  • @doriandoussain1528
    @doriandoussain1528 Жыл бұрын

    My nextjs mentor, thx man

  • @mwaqze
    @mwaqze2 жыл бұрын

    Hello Jack, it's great to watch videos on react hooks mastery. Can you create a playlist with the title "React Mastering" with all the videos related to React Mastery please? That'll be really helpful. Thank you.

  • @tahamanna3600
    @tahamanna36006 ай бұрын

    great video!

  • @thefonsotube
    @thefonsotube Жыл бұрын

    Great content sir! Do you have a video comparing Zustand and Redux Toolkit?

  • @jp0678
    @jp06782 жыл бұрын

    While I'm kind of already familiar with this concept, I still learn some new stuff here and there when you explained it. Thanks! By the way, what extension do you use for that autocomplete?

  • @jherr

    @jherr

    2 жыл бұрын

    GitHub Copilot.

  • @jp0678

    @jp0678

    2 жыл бұрын

    @@jherr Oh, I see. Thank you!

  • @alexshepel9387
    @alexshepel93874 ай бұрын

    Nice!

  • @Mostafaabobakr7
    @Mostafaabobakr72 жыл бұрын

    I love your channel

  • @elwoseopenstepcrew1134
    @elwoseopenstepcrew1134 Жыл бұрын

    amazing content

  • @neelabhdutta6691
    @neelabhdutta66912 жыл бұрын

    Amazing

  • @naturegoggle
    @naturegoggle2 жыл бұрын

    Brilliant

  • @korkmazsalim
    @korkmazsalim2 жыл бұрын

    Thanks Jack great content . Btw is there a solution in zustand for creating state slices and naming them so when project gets bigger we can inspect them by redux toolkit with the slice names ? ( i can combine at store but they are spreaded in toolkit).Thank you..

  • @jherr

    @jherr

    2 жыл бұрын

    You make multiple stores. I think that's the basic idea. One store per, what you would categorize as a "slice".