React State Management - Intermediate JavaScript Course

React State Management is half of your React app so it is important for React developers to understand. In this full intermediate React tutorial, you will learn how to implement state management using industry best practices.
✏️ Jack Herrington created this course. He is a principal full stack engineer. Check out his channel: / @jherr
💻 Code!: github.com/jherr/fcc-state
⌨️ (0:00:00) Introduction
⌨️ (0:03:27) useState
⌨️ (0:18:37) useReducer
⌨️ (0:32:29) useMemo & useCallback
⌨️ (0:49:43) useEffect
⌨️ (1:05:59) useRef
⌨️ (1:13:53) Context and Custom Hooks
⌨️ (1:41:48) React Query & React Location
⌨️ (1:57:26) Zustand
⌨️ (2:06:11) Valtio
⌨️ (2:12:44) Jotai
⌨️ (2:20:51) Redux
⌨️ (2:37:56) The new use hook
⌨️ (2:44:26) Recommendations
⌨️ (2:46:07) Outroduction
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 331

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

    Despite React's popularity it's so hard to find proper intermediate to advanced explanations about the nuances of the library. Seems like most React developers just copy paste and adjust code until they get the desired outcome. It's for this reason that I love Jack for his contribution to the tutorial landscape.

  • @Castro_Gabriel

    @Castro_Gabriel

    Жыл бұрын

    I feel the same way.

  • @vonderklaas

    @vonderklaas

    Жыл бұрын

    You are right, Jack, Theo & some other dudes help with more advanced / senior things, rather than typical todo lists and stuff

  • @technical3199

    @technical3199

    Жыл бұрын

    yeah same here lol

  • @mosesmolepo1702

    @mosesmolepo1702

    7 ай бұрын

    I'm guilty

  • @Farouk-Dev

    @Farouk-Dev

    Ай бұрын

    Samee ❤

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

    I don’t think I’ve ever commented on a KZread video, but Jack Herrington is one of the best teachers I’ve seen on the channel. Thank you, Jack. Thank you for a fun time learning state in React!

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

    This instructor is really skilled at explaining in just enough detail, good choice!

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

    I learnt more about useState in 20 mins explained here than in a whole term of web development diploma from conventional education. I am so thankful to value-oriented YT channels like this one, are free sources of knowledge and value to everyone at the cost of an internet connection. Thank you for delivering this content about React

  • @lukas.webdev

    @lukas.webdev

    Жыл бұрын

    I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉

  • @marvinfok65

    @marvinfok65

    7 ай бұрын

    Agreed! I no longer want to learn from conventional education! They set a time frame and just throw everything to you and expect you to know and they considered their job done!

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

    This was one of the most comprehensive tutorials I've watched,. I really like how you gave examples of why the state doesn't change when discussing useState.

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

    This is a really great mini course. Loved it! I went and followed Jack's channel as well! Thanks for putting this together.

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

    wow, this is actually super important and it was so hard to actually find something that covers these concepts so well. thank you!

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

    Jack is actually one of few rare guys that covers and teaches you intermediate topics about react/next and typescript on his channel. One thing that I also like for him is that he with all that knowledge, you hear from the voice that he is still on to ground without any ego-trips, he is there to only teach you and transfer a knowledge. Good job Sensei!

  • @jherr

    @jherr

    Жыл бұрын

    Thank you!

  • @thebattinson1278

    @thebattinson1278

    Жыл бұрын

    I agree !

  • @therealdevopsintern

    @therealdevopsintern

    Жыл бұрын

    @@thebattinson1278 true

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

    Jack, You are AWESOME!!!! I think this tutorial was by far better than other react and state management's videos I've seen so far. Thanks for sharing your incredible knowledge.

  • @lukas.webdev

    @lukas.webdev

    Жыл бұрын

    I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉

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

    This is seriously such a great instructor!

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

    Best tutorial. This is so helpful. Words cannot explain how grateful I am to have access to invaluable educational material like this.

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

    I learnt HTML and CSS from your channel from scratch and now I am posting my own web dev content! Thank you for your work :)

  • @germanguerci1744
    @germanguerci17447 ай бұрын

    This is the most important video about React I have ever seen in over 3 years of using React. Thank you!

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

    easily the best react video and the best teacher. thank you for doing this !

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

    your always great ,right time providing right course for the subscriber .thanks for the educator

  • @usmanmalik-xk5vi
    @usmanmalik-xk5vi2 ай бұрын

    Awesome resource man, Thank you for not just explaining how state management works but how the underlying data structure is handled by JS for example by reference and by value.

  • @r-i-ch
    @r-i-ch Жыл бұрын

    Jack is maybe the best intermediate content creator. Glad to see him here!

  • @jigneshpatel8975
    @jigneshpatel89758 ай бұрын

    It's Incredible! Got the actual understanding of state management from this. Kudos to Jack!

  • @thwackspongbelm
    @thwackspongbelm7 ай бұрын

    Highly instructive, thank you. 18 minutes in, I can't wait to watch the rest

  • @user-oz7eu7ps9r
    @user-oz7eu7ps9r11 ай бұрын

    I have been learning react since months but this video just hit different! Jack is so amazing! Only after watching this video did I truly understood stage management!

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

    Thank you sir. Your useEffect video was very informative. i learned the why along with the how

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

    This man is the reason I went from junior to medior. You seriously must watch his videos if you're serious about a career with React.

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

    Awesome tutorial. The only thing missing of the useState video is the classic example with 3 consecutive setCount functions that add 1 but the user get 1 again as a result. Then you teach about previous state!

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

    Thank you very much for this course, I think you explain the best among the lecturers.

  • @umair.ramzan
    @umair.ramzan Жыл бұрын

    Thanks for this, it's really worth the time I have put into it.

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

    Jack is a monument and I'm so glad to see him here on FCC ❤

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

    Fantastic tutorial!! Thank you.

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

    Jack is great. Do whatever he tells you to do. You will thank him later.

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

    Great refresher , Yet learnt some new things.

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

    this is really well explained. thank you

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

    Best of the Best, ty Mr.Herrington a lot. You are really awesome

  • @totallypointlessvideos3832
    @totallypointlessvideos383211 ай бұрын

    This is really and awesome video. Many thanks for this!

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

    Jack is the best talking about React and Next 🔥🔥

  • @user-gf9ri4wj5h
    @user-gf9ri4wj5h Жыл бұрын

    Masterpiece!

  • @juanmamani2110
    @juanmamani21103 ай бұрын

    best 2:46 of the day! thanks for sharing!

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

    Loved the squirrel raiding the bird feeder in the start of the video 😂

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

    I'm interested to know how to create this with TypeScript. Excellent tutorial. I will spend the next couple of days to build alongside.

  • @ChristopherBrown-bj4zl
    @ChristopherBrown-bj4zlАй бұрын

    Alright... 7 minutes in and I can already tell this is a good video. So many "tutorials" gloss over the nuances of lines of code and this tutorial doesn't. This tutorial also goes a step further by showing code that you would think would work, but actually doesn't and explains why. For me, I need this. I need to know why something is happening, because under-the-hood/behind-the-scenes magic never works for me in the long run.

  • @nodeSkin
    @nodeSkin10 ай бұрын

    This man is just amazing !!!

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

    Next make a Advanced React course. it will help me greatly in my job. Thank you for all the awesome content.

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

    I did a hit on like button, when i was at 17:11 ( setLIst( [...list, name ] ) ). Thank you so much master, for this vauable source

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

    "How coooool is thaaat?" :D

  • @AurelianoShowsTheWorld
    @AurelianoShowsTheWorld10 ай бұрын

    Thank you, that's a very nice video!

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

    this is absolute gold

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

    45 minutes watched BTW what a great Tutorial !!! awesome

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

    A master piece!! The vscode configurations is from another planet 🤯 Can you share please

  • @sayedmohdkazimmehdi7256

    @sayedmohdkazimmehdi7256

    Жыл бұрын

    console ninja

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

    Excellent teacher!!!!

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

    I am on 1:13:40 and I was following along and everything was going fine but then the tutor switched to Typescript and starts teaching in it If they wanted to teach in Typescript they should sticked to it since the beginning or they should have notified that things will be taught in TS later in this course as a person who has no knowledge in TS now i have to learn it then i have come back to this course and resume this course it will just waste the time, for those who don't know TS

  • @wahajahmed2823
    @wahajahmed28234 ай бұрын

    One of the greate video. 🤩🤩

  • @HammadUrRehman-gy9vs
    @HammadUrRehman-gy9vs Жыл бұрын

    Great course, Just one correction In useRef section if we do "useState([{id: idRef.current++ , name:"john"} , {id: idRef.current++, name: "Jane"} ])" then upon every re-render idRef value gets updated two times, that maybe because of the development mode which follows "mount unmount and then again mount lifecycle". Note: "On second entry you will get the id 8 instead of 4"

  • @mazharansari7813

    @mazharansari7813

    Жыл бұрын

    Thanks bro I was thinking about this

  • @kharadinbrahman

    @kharadinbrahman

    10 ай бұрын

    just found that out yesterday and commented. one better just set the numbers in the useState initial values.

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

    Best instructor

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

    Superb course

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

    Great vid!

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

    I already know this will be epic..

  • @jpmitchell925
    @jpmitchell9259 ай бұрын

    This is actually gold

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

    Will keep this video for future reference. Thank you freecodecamp and jack. I just wish recoil was part of this video.

  • @jherr

    @jherr

    Жыл бұрын

    Jotai is, and that is very close and IMHO better.

  • @syedhaider0916

    @syedhaider0916

    Жыл бұрын

    @@jherrsir if you vouch for it, I will definitely definitely look into it.

  • @vivekkumar-pc1xy
    @vivekkumar-pc1xy Жыл бұрын

    you are the master of javascript

  • @developerpranav
    @developerpranav8 ай бұрын

    This might be the last state management video one needs to watch for a long time, until they hit any limitations (which I dont think they will for a long time!)

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

    Jack's a legend. Thanks for the pokeymon man.

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

    Thank you very much Sir.

  • @krobi26
    @krobi2611 ай бұрын

    I've been using React for about a year and a half, but I think I got 50% better at React by just watching this course.

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

    You know it's going to be a good React tutorial when the instructor doesn't use CRA

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

    Thanks!

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

    goddddd amazing!!!

  • @john-dolaspassiveincomestr9144
    @john-dolaspassiveincomestr914410 ай бұрын

    My eye just pop open. Jack thanks

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

    Thank you sir ❤🙏

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

    Hello Jack. Thank you for your time and effort to help improve our skills. Question: I have modified your code slightly where I am importing an array of names instead of hard coding it in the components. I am running into a slight problem where I cannot add a coma and space between the names from the array. how can I add this minor detail? Thank you for your time!

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

    Awesome.. Tutorial Jack... purely delighted... Thank you so much!!! Do you mind telling me what is the theme that you used in visual studio code... really liked it and how all keywords are italic... please help me on this

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

    Hey Jack ! Awesome video man. Clear all the fundamentals in one shot. Can you let me know what VS Code extension you are using, that seems to be doing wonders as well.

  • @nikhilranka9660

    @nikhilranka9660

    Жыл бұрын

    Quokka.js is the one you are amazed by I guess. Or possibly, console-ninja

  • @Ujedkemal

    @Ujedkemal

    Жыл бұрын

    did you get the answer dude? let me know if you did.

  • @raafihilmi

    @raafihilmi

    Жыл бұрын

    for auto complete? I think its Tabnine extensions

  • @raafihilmi

    @raafihilmi

    Жыл бұрын

    @@Ujedkemal for auto complete? I think its Tabnine extensions

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

    im forever using use reducer for my forms

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

    Donald Trump is back to "Make React State Management Great Again"

  • @Lord724

    @Lord724

    Жыл бұрын

    Bhut Hard 😂👍🏻

  • @Aripfizer

    @Aripfizer

    Жыл бұрын

    Sur 😹

  • @JoonhwanLee

    @JoonhwanLee

    Жыл бұрын

    great united STATES again!

  • @nicka.9057

    @nicka.9057

    Жыл бұрын

    🤮

  • @ajay_628

    @ajay_628

    Жыл бұрын

    It's gonna be huuuuggggeee!!!

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

    Could you record a video about eventrix? It’s a new open source alternative for redux that our company created and we want to share our work with the world :)

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

    awesome video, does anyone knows what extension he uses for shortcuts in react (or more in general what do you guys would suggest?)

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

    Nice course

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

    you always surprise me with the super white bg.

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

    would love to see a tutorial about swr in terms of state management, and maybe compare it to react query

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

    High quality intermediate to advanced React contect

  • @bengorman1722
    @bengorman17227 ай бұрын

    Thanks for the great video Jack! Regarding useReducer, the current React 18 docs examples declare the reducer function *outside* the component body. Besides reusability, is there any reason to do it this way as opposed to declaring the reducer *inside* the component?

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

    I like your teaching technic

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

    Good explanations, can anyone provide some advice about project structure/folders when building medium sized app using hooks for local state and context or maybe zustand for global state ? some boilerplate repo would be appreciated too

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

    Hey @jherr, this video is really incredible! Great job! Any idea why Beedrill is the first Pokemon on the useContext results at 1:40:22, but not on the Jotai results at 2:18:51? Is it because you sliced a different amount? I really like the atomic model. I'm gonna have to try Jotai out.

  • @yukinosuketakada661

    @yukinosuketakada661

    Жыл бұрын

    because it slices before sorting

  • @yukinosuketakada661

    @yukinosuketakada661

    Жыл бұрын

    shoud slice after sorting

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

    Jack, please what's your font and your VSCode theme? thank you for the amazing tutorial

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

    I was not expecting Donald Trump to teach react

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

    Hi, Thank you for your awesome video....what is your extension to complete code in react

  • @BrightEbassuah
    @BrightEbassuah5 ай бұрын

    Nice Sir

  • @gabrielsantini2841
    @gabrielsantini284111 ай бұрын

    what nice place jack has to work, in the middle of the woods. I'd like have some place like that.

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

    what extensions are you using? how can you run typescript file apart from others (when you open typescript workbook 19:30) - how does the VSCode shows the result in front of the code?

  • @jherr

    @jherr

    Жыл бұрын

    That's Quokka.

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

    Hello, I love your videos about kivy)) I have a question: I will develop a mobile app and upload it to the Google Play. What do you think, can I use kivy or it is better to use java? Thank you)

  • @kharadinbrahman
    @kharadinbrahman10 ай бұрын

    1:13:36 Jack, it gives an error as it is, useRef: it runs ok with values like 1, 2, 3... but then it comes obvious that the ++ increments in the useState are fired every time and the count increases by 5, if in strict mode, or by 3, if you comment out 'strict' mode., so what one can do is to assign numbers: id 1 and id 2 for John and Jane, and start the count with 3. (or 2 and pre-increment the id)

  • @herreranicoo25

    @herreranicoo25

    8 ай бұрын

    Thanks for this!

  • @amithanilgeorge4956

    @amithanilgeorge4956

    6 ай бұрын

    Thanks for this,but i don't understand reason behind this ,is it because setting useState which lead to render this it results in increamenting refId more times?

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

    I need this color theme!

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

    Forgive me for not knowing exactly how to ask this but what is the tool used for the suggested autocomplete when coding?

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

    Just after watching 15 mins, my mind be like 🤯😮‍💨 (how a man can make us to understand something into this level)

  • @dhanviakash726

    @dhanviakash726

    Жыл бұрын

    @AKSHAY sorry I didn't get you.. As well as I am from south India, so I didn't understand Hindi in code with harry videos

  • @dhanviakash726

    @dhanviakash726

    Жыл бұрын

    @AKSHAY hey by the way, do you know any best react native course.. 😁

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

    whats the extension he used? like when we want to type onClick function, the extension could show up the recomendation tag and symbol for typing the function.

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

    Cca 17:30 Why not using the "prevState" for updating the array?

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

    Jack is awesome, very knowledgeable and insightful! Nevertheless, I got a few questions: 1. Example with Pokemon context used setSearch function inside a hook. Isn't it a good way to move such functions outside of a hook, changing its signature to expect dispatch as a parameter? As a benefit of this approach you'd make setSearch treeshakable, and wouldn't ship dead code in case a consumer doesn't even need it. 2. Regarding the zustand example... Your setAllPokemon function derives new state based on search criteria and a list of pokemons. The question is why do you prefer keep derived state in a store, and call filtering-sorting function two times in a store, instead of inversion the responsibility to filter sort pokemons IF it is needed to the consumer of the store. As far as I understand you could provide a selector for this purpose, aren't you? (i'm not sure since I haven't used zustand and frankly rarely use react). Btw this separation of concerns is what I liked when you showed vatio. 3. This one is more of a wish than of a question) I would really love to see you explaining the example with simple rxjs state management approach. I guess it would be kinda in a family of atomic state management, but light light weight, isn't it? And I also wondering about having a good analysis of pros and cons of those state managers compared to each other)

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

    Merci

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

    Can someone explain to me what Jack does around the 31 minute mark with the {...state, ...action}. I understand the spread operator syntax, I just can't wrap my head around how this works with a more complex state. Like if I had an array of people with first & last name, how would this shortened reducer function know which values to change? I've spent an hour+ trying to work this out.

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

    Does anybody know what Jack is using that gives prompts when he starts typing? For example, for reduce function syntax at 33min.11sec? What VS extension is it?

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

    Wow

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

    What is the name of the extension you use to auto fill specific lines? Thanks!

  • @jherr

    @jherr

    Жыл бұрын

    GitHub Copilot