I don’t think I’ve ever commented on a TH-cam 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!
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
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!
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.
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!
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.
I'm amazed at how good Jack Herrington is at teaching you in a surprising amount of detail how React hooks work, in just about one hour and a half (the rest of the video is about state management libraries). Props to him and freeCodeCamp.
This React State Management tutorial is a game-changer for anyone looking to level up their JavaScript skills! The explanations are clear, and the examples make even complex concepts easy to understand. I love how you break down state management techniques like useState, useReducer, and Context API. Definitely recommending this to anyone serious about mastering React! Keep up the amazing work!
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.
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.
I'm half way through and for the most part, really good teaching and insights. The useContext part I think was kind of all over the place, hard to follow.
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)
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?
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!
what a great masterclass. definitely a must-watch video for all the people learning react. because of the level of detail and the clarity in jack's explanation
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.
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!
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"
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!)
57:00 How are you preventing the second useEffect from attempting the fetch while selectedName is still null on mount? In my case, I'm forced to wrap the fetch in a "if (selectedName) {}" otherwise it attempts to fetch an invalid json and I get the error "Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Edit: 58:00 nevermind lol you got the error too it's just that your dev environment doesn't lock you out because you disabled strict mode
1:12:00 wouldn't it be valid here to just set id to names.length + 1? Not like there is any overhead in accessing the length property of an object right?
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?
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.
at 44:27 code line number 7 console.log('running sort'); x2 'running sort' running sort' how do I got " x2 running sort running sort" these kind of information, which extension did he use?
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.
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.
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.
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.
in 1:12: 50 regarding the idRef. When you add a name it goes with id 3 but then adding more names they go 5 by 5, i got after id 8, id 13, id 18.... Why it happens? Thanks in advance, just love this video, so useful!!! Thanks freeCodeCamp and thanks Jack @Jack Herrington
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"
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!
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?
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?
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
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
I don’t think I’ve ever commented on a TH-cam 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!
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
I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉
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!
This instructor is really skilled at explaining in just enough detail, good choice!
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.
I feel the same way.
You are right, Jack, Theo & some other dudes help with more advanced / senior things, rather than typical todo lists and stuff
yeah same here lol
I'm guilty
Samee ❤
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!
Thank you!
I agree !
@@Vincent_A.Freeman true
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.
This is the most important video about React I have ever seen in over 3 years of using React. Thank you!
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 :)
This is seriously such a great instructor!
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.
I'm amazed at how good Jack Herrington is at teaching you in a surprising amount of detail how React hooks work, in just about one hour and a half (the rest of the video is about state management libraries). Props to him and freeCodeCamp.
wow, this is actually super important and it was so hard to actually find something that covers these concepts so well. thank you!
Jack is maybe the best intermediate content creator. Glad to see him here!
This React State Management tutorial is a game-changer for anyone looking to level up their JavaScript skills! The explanations are clear, and the examples make even complex concepts easy to understand. I love how you break down state management techniques like useState, useReducer, and Context API. Definitely recommending this to anyone serious about mastering React! Keep up the amazing work!
Best tutorial. This is so helpful. Words cannot explain how grateful I am to have access to invaluable educational material like this.
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.
I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉
This is a really great mini course. Loved it! I went and followed Jack's channel as well! Thanks for putting this together.
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.
I'm half way through and for the most part, really good teaching and insights. The useContext part I think was kind of all over the place, hard to follow.
easily the best react video and the best teacher. thank you for doing this !
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
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)
Thanks for this!
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?
Thanks!
Loved the squirrel raiding the bird feeder in the start of the video 😂
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!
Highly instructive, thank you. 18 minutes in, I can't wait to watch the rest
what a great masterclass. definitely a must-watch video for all the people learning react. because of the level of detail and the clarity in jack's explanation
Jack is great. Do whatever he tells you to do. You will thank him later.
It's Incredible! Got the actual understanding of state management from this. Kudos to Jack!
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.
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!
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"
Thanks bro I was thinking about this
just found that out yesterday and commented. one better just set the numbers in the useState initial values.
Jack is a monument and I'm so glad to see him here on FCC ❤
Jack is the best talking about React and Next 🔥🔥
I absolutely love Jack’s teaching style 🥇🙌
Thank you very much for this course, I think you explain the best among the lecturers.
your always great ,right time providing right course for the subscriber .thanks for the educator
Cca 17:30
Why not using the "prevState" for updating the array?
best 2:46 of the day! thanks for sharing!
on 28:35 wouldn't it be better to use forEach instead of map? Since map creates a new array which is not necessary here
Fantastic tutorial!! Thank you.
Thanks for this, it's really worth the time I have put into it.
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!)
I'm interested to know how to create this with TypeScript.
Excellent tutorial.
I will spend the next couple of days to build alongside.
Thank you sir. Your useEffect video was very informative. i learned the why along with the how
You know it's going to be a good React tutorial when the instructor doesn't use CRA
Next make a Advanced React course. it will help me greatly in my job. Thank you for all the awesome content.
Best of the Best, ty Mr.Herrington a lot. You are really awesome
57:00 How are you preventing the second useEffect from attempting the fetch while selectedName is still null on mount? In my case, I'm forced to wrap the fetch in a "if (selectedName) {}" otherwise it attempts to fetch an invalid json and I get the error "Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data".
Edit: 58:00 nevermind lol you got the error too it's just that your dev environment doesn't lock you out because you disabled strict mode
1:12:00 wouldn't it be valid here to just set id to names.length + 1? Not like there is any overhead in accessing the length property of an object right?
45 minutes watched BTW what a great Tutorial !!! awesome
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.
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?
That's Quokka.
Thank you, that's a very nice video!
this is really well explained. thank you
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.
A master piece!! The vscode configurations is from another planet 🤯 Can you share please
console ninja
at 44:27 code line number 7 console.log('running sort'); x2 'running sort' running sort' how do I got " x2 running sort running sort" these kind of information, which extension did he use?
console ninja
This is really and awesome video. Many thanks for this!
Great refresher , Yet learnt some new things.
no words can describe my appreciation
Best instructor
I already know this will be epic..
One of the greate video. 🤩🤩
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.
you are the master of javascript
This man is just amazing !!!
Superb course
Masterpiece!
6:31 anyone knows how does that error just appear in vsc? is this supposed to be some sort of extension? thank you!
that's an extension called Console Ninja for VS Code which he has as preview.
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.
Quokka.js is the one you are amazed by I guess. Or possibly, console-ninja
did you get the answer dude? let me know if you did.
for auto complete? I think its Tabnine extensions
@@Ujedkemal for auto complete? I think its Tabnine extensions
"How coooool is thaaat?" :D
this is absolute gold
52:39 This man is so good at teaching....
Thanks, great tutorial! who can tell me how to auto complete the whole line when Jack just typed "on" at 31:13, please?
he is using coPilot extension
@@digitalsahara6670 Oh, thanks~
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.
because it slices before sorting
shoud slice after sorting
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.
This is actually gold
My eye just pop open. Jack thanks
awesome video, does anyone knows what extension he uses for shortcuts in react (or more in general what do you guys would suggest?)
Excellent teacher!!!!
in 1:12: 50 regarding the idRef. When you add a name it goes with id 3 but then adding more names they go 5 by 5, i got after id 8, id 13, id 18.... Why it happens? Thanks in advance, just love this video, so useful!!! Thanks freeCodeCamp and thanks Jack @Jack Herrington
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"
Hi, Thank you for your awesome video....what is your extension to complete code in react
you always surprise me with the super white bg.
Had to add the middleware at 2:33 😁
Thanks amazing content... Whats the name of the theme on VS code ? it's looks good
Night Wolf [black]
@@jherr Thank you sir !! ❤✨
Forgive me for not knowing exactly how to ask this but what is the tool used for the suggested autocomplete when coding?
is nice tutorial
What is the name of Extensions VsCode?...
is very good Extensions I need then
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!
What is the name of the extension you use to auto fill specific lines? Thanks!
GitHub Copilot
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?
Great vid!
Jack, please what's your font and your VSCode theme?
thank you for the amazing tutorial
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?
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
High quality intermediate to advanced React contect
Will keep this video for future reference. Thank you freecodecamp and jack. I just wish recoil was part of this video.
Jotai is, and that is very close and IMHO better.
@@jherrsir if you vouch for it, I will definitely definitely look into it.
would love to see a tutorial about swr in terms of state management, and maybe compare it to react query
What is that extension that shows in the function setCount(count + 1) before he type cout++ ?
GitHub Copilot
preparation to an subject...maybe?!
@@dmsnm Thank you
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
my vs code is not autocompleting like this. how to turn this feature on or is it an extension?
GitHub Copilot