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.

⌨️ (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

--

[birandkoray]

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

[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.

[renielrabie]

I don’t think I’ve ever commented on a YouTube 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!

[mazharansari]

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

[Cloudimfm]

I was not expecting Donald Trump to teach react

[andreainvernizzi]

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

[melkenhoning]

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

[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 :)

[tobilobaabayomi]

Tbh I am finding it hard to understand this useReducer

[nikolakikanovic]

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!

[Eddiek]

This is seriously such a great instructor!

[eleah]

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

[thomasstambaugh]

The shift to Typescript at 1:13:53 significantly impairs the rest of the video. The noise of all that Typescript junk obfuscates the material I'm trying to absorb. I apparently have to go elsewhere to learn how to use "useContext", "createContext" and custom hooks in Javascript.

[HammadUrRehman-gyvs]

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"

[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 :)

[ryanstehle]

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.

[spikezkid]

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

[kharadinbrahman]

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)

[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.

[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.