I don’t think I’ve ever commented on a KZbin 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!
@andreainvernizzi85102 жыл бұрын
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 Жыл бұрын
I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉
@marvinfok6511 ай бұрын
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!
@melkenhoning1582 жыл бұрын
This instructor is really skilled at explaining in just enough detail, good choice!
@Hizbullla2 жыл бұрын
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 Жыл бұрын
I feel the same way.
@vonderklaas Жыл бұрын
You are right, Jack, Theo & some other dudes help with more advanced / senior things, rather than typical todo lists and stuff
@technical3199 Жыл бұрын
yeah same here lol
@mosesmolepo170211 ай бұрын
I'm guilty
@Farouk-Dev5 ай бұрын
Samee ❤
@studyingasyouwere2 жыл бұрын
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 :)
@nikolakikanovic97402 жыл бұрын
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!
@jherr2 жыл бұрын
Thank you!
@Vincent_A.Freeman2 жыл бұрын
I agree !
@therealdevopsintern Жыл бұрын
@@Vincent_A.Freeman true
@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.
@Website_TV_12 ай бұрын
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!
@germanguerci174411 ай бұрын
This is the most important video about React I have ever seen in over 3 years of using React. Thank you!
@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.
@Eddie4k2 жыл бұрын
This is seriously such a great instructor!
@CèliaCasanovas3 ай бұрын
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.
@r-i-ch2 жыл бұрын
Jack is maybe the best intermediate content creator. Glad to see him here!
@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 Жыл бұрын
Thanks bro I was thinking about this
@kharadinbrahman Жыл бұрын
just found that out yesterday and commented. one better just set the numbers in the useState initial values.
@EndiOdobasic Жыл бұрын
wow, this is actually super important and it was so hard to actually find something that covers these concepts so well. thank you!
@tjdgmlchl6305 Жыл бұрын
Best tutorial. This is so helpful. Words cannot explain how grateful I am to have access to invaluable educational material like this.
@krobi26 Жыл бұрын
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.
@eleah26652 жыл бұрын
Jack is great. Do whatever he tells you to do. You will thank him later.
@ChristopherBrown-bj4zl5 ай бұрын
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.
@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!
@vosyasabesquien2 ай бұрын
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
@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 Жыл бұрын
I just posted a video about the same topic (in 2023) - maybe this could be interesting for you as well. 😉
@usmanmalik-xk5vi6 ай бұрын
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.
@developerpranav Жыл бұрын
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!)
@tomarapetty2 жыл бұрын
This is a really great mini course. Loved it! I went and followed Jack's channel as well! Thanks for putting this together.
@eliuddyn2 жыл бұрын
Jack is the best talking about React and Next 🔥🔥
@hhao00112 жыл бұрын
easily the best react video and the best teacher. thank you for doing this !
@federicamariani32942 жыл бұрын
Jack is a monument and I'm so glad to see him here on FCC ❤
@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
@ak-loz2 жыл бұрын
I'm interested to know how to create this with TypeScript. Excellent tutorial. I will spend the next couple of days to build alongside.
@snoussihamza23452 жыл бұрын
A master piece!! The vscode configurations is from another planet 🤯 Can you share please
@sayedmohdkazimmehdi7256 Жыл бұрын
console ninja
@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)
@herreranicoo25 Жыл бұрын
Thanks for this!
@amithanilgeorge495610 ай бұрын
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?
@jigneshpatel8975 Жыл бұрын
It's Incredible! Got the actual understanding of state management from this. Kudos to Jack!
@santanu292 жыл бұрын
Next make a Advanced React course. it will help me greatly in my job. Thank you for all the awesome content.
@thwackspongbelm11 ай бұрын
Highly instructive, thank you. 18 minutes in, I can't wait to watch the rest
@martinsolheim6202 Жыл бұрын
Loved the squirrel raiding the bird feeder in the start of the video 😂
@StudyNerd-t4c Жыл бұрын
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!
@Alysia.in.Wonderland4 ай бұрын
I absolutely love Jack’s teaching style 🥇🙌
@gogaimerlishvili45422 жыл бұрын
Thank you very much for this course, I think you explain the best among the lecturers.
@JoelByrd124 күн бұрын
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.
@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)
@juanmamani21107 ай бұрын
best 2:46 of the day! thanks for sharing!
@mks59882 жыл бұрын
your always great ,right time providing right course for the subscriber .thanks for the educator
@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 Жыл бұрын
Quokka.js is the one you are amazed by I guess. Or possibly, console-ninja
@Ujedkemal Жыл бұрын
did you get the answer dude? let me know if you did.
@raafihilmi Жыл бұрын
for auto complete? I think its Tabnine extensions
@raafihilmi Жыл бұрын
@@Ujedkemal for auto complete? I think its Tabnine extensions
@arghyasaha7259 Жыл бұрын
Thank you sir. Your useEffect video was very informative. i learned the why along with the how
@umair.ramzan2 жыл бұрын
Thanks for this, it's really worth the time I have put into it.
@dhanviakash7262 жыл бұрын
Just after watching 15 mins, my mind be like 🤯😮💨 (how a man can make us to understand something into this level)
@dhanviakash7262 жыл бұрын
@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
@dhanviakash7262 жыл бұрын
@AKSHAY hey by the way, do you know any best react native course.. 😁
@chhavimanichoubey9437 Жыл бұрын
Pass by value vs pass by reference in terms of state, no one ever mentioned this in any video or blog tutorial I saw in my whole life.
@thatbackbenchdudeАй бұрын
52:39 This man is so good at teaching....
@spikezkid0222 жыл бұрын
You know it's going to be a good React tutorial when the instructor doesn't use CRA
@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
@syedhaider0916 Жыл бұрын
Will keep this video for future reference. Thank you freecodecamp and jack. I just wish recoil was part of this video.
@jherr Жыл бұрын
Jotai is, and that is very close and IMHO better.
@syedhaider0916 Жыл бұрын
@@jherrsir if you vouch for it, I will definitely definitely look into it.
@vivekkumar-pc1xy Жыл бұрын
you are the master of javascript
@ota-ke Жыл бұрын
High quality intermediate to advanced React contect
@birandkoray2 жыл бұрын
Donald Trump is back to "Make React State Management Great Again"
@Lord7242 жыл бұрын
Bhut Hard 😂👍🏻
@Aripfizer Жыл бұрын
Sur 😹
@JoonhwanLee Жыл бұрын
great united STATES again!
@nicka.9057 Жыл бұрын
🤮
@WrestleWithAdi Жыл бұрын
It's gonna be huuuuggggeee!!!
@prasad_yt Жыл бұрын
Great refresher , Yet learnt some new things.
@codematics83442 жыл бұрын
this is really well explained. thank you
@adeleke51402 жыл бұрын
Jack, please what's your font and your VSCode theme? thank you for the amazing tutorial
@anasouardini2 жыл бұрын
you always surprise me with the super white bg.
@abzzz-y7o4 ай бұрын
no words can describe my appreciation
@kim92se64 Жыл бұрын
45 minutes watched BTW what a great Tutorial !!! awesome
@omarlaralima24592 жыл бұрын
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!
@andreiKspb Жыл бұрын
Best of the Best, ty Mr.Herrington a lot. You are really awesome
@AurelianoShowsTheWorld Жыл бұрын
Thank you, that's a very nice video!
@bikerd12 Жыл бұрын
Fantastic tutorial!! Thank you.
@totallypointlessvideos3832 Жыл бұрын
This is really and awesome video. Many thanks for this!
@sumairimtiaz45452 жыл бұрын
Solution Error: you will face an error in the last part i.e. Redux and the error will be: Uncaught Error: Warning: Middleware for RTK-Query API at reducerPath "pokemonApi" has not been added to the store. You must add the middleware for RTK-Query to function correctly! Solution: export const store = configureStore({ reducer: { search: searchSlice.reducer, pokemonApi: pokemonApi.reducer }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(pokemonApi.middleware) }); ====== The End ========
@zhiryarshirinyan Жыл бұрын
Thank's that helped a lot.
@csabapadar99782 жыл бұрын
"How coooool is thaaat?" :D
@learnfronteasy9642 Жыл бұрын
Hi, Thank you for your awesome video....what is your extension to complete code in react
@husainahmadali83232 жыл бұрын
Best instructor
@spongebob93lover Жыл бұрын
would love to see a tutorial about swr in terms of state management, and maybe compare it to react query
@Bookwala122 жыл бұрын
I already know this will be epic..
@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
@dmltdev9 күн бұрын
After a year, do you still believe it was a waste of time?
@gabrielsantini2841 Жыл бұрын
what nice place jack has to work, in the middle of the woods. I'd like have some place like that.
@zombiefacesupreme2 жыл бұрын
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 Жыл бұрын
because it slices before sorting
@yukinosuketakada661 Жыл бұрын
shoud slice after sorting
@Hacking-NASSA-with-HTML2 жыл бұрын
hey I know that guy ✅!I have seen them before 🙂👍
@beckaksel87832 жыл бұрын
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)
@KoussaiKareemАй бұрын
thanks for this great video but i wanna ask what is the name of the compiler that he is using and is it free?
@john-dolaspassiveincomestr9144 Жыл бұрын
My eye just pop open. Jack thanks
@shlomiyahbes48822 жыл бұрын
Thanks amazing content... Whats the name of the theme on VS code ? it's looks good
@jherr2 жыл бұрын
Night Wolf [black]
@shlomiyahbes48822 жыл бұрын
@@jherr Thank you sir !! ❤✨
@sumairimtiaz45452 жыл бұрын
Superb course
@nosrehcorporation6 ай бұрын
Nice tutorrial, my only question is why Arcanine is not the first as it starts with A?
@nicolafontana6376 Жыл бұрын
awesome video, does anyone knows what extension he uses for shortcuts in react (or more in general what do you guys would suggest?)
@tobilobaabayomi5708 Жыл бұрын
Tbh I am finding it hard to understand this useReducer
@thomasstambaugh51818 ай бұрын
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.
@Svish_2 жыл бұрын
I wish people would stop saying objects and arrays are passed by reference in JS. They are passed by value, just like all other kinds of values. The value passed for an object and an array is the reference/address to the object, but it's still passed as a value, and you cannot modify that value. You can modify the fields of an object, and you can push items to an array, but you can't modify the reference to the object itself. You can only overwrite the value with a different value, just like you do with numbers and strings. You can easily test this by trying to implement a `swap(a: T, b: T): void` function. It's impossible to do in JS, even if you pass in two objects or arrays. Why? Because objects and arrays are in fact passed by value, not by reference.
@bengorman172211 ай бұрын
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?
@ThunderSlav2 жыл бұрын
Cca 17:30 Why not using the "prevState" for updating the array?
@AkshayMagrani10 ай бұрын
Mr. Herrington, There is a bug in useRef() portion, during the last implementation on names = [{id: idRef.current++, name: 'Jack'}, {id: idRef.current++, name: 'Jill'}]. After the first render, when you click the button -> id: 3, name value will be added to names, which will cause a re-render but idRef maintains its previous value which was 3, which causes the idRef value to increment to 5 due to two idRef.current++ in the definition of names useState variable (but the 'names' state variable cannot take the incremented values outside of setNames setter function), so when the next time a button is clicked, {id: 5, name: whatever-i-input} is added and so on. I went to other sites to solve the issue, using the length of the names[] is suggested as the next best option for the id value but you will have to use the preincrement operator to run. Let me know if I am blowing hot air, I am fairly new to React and cannot compare with your expertise in the subject matter.
@Drayken6 ай бұрын
Ran into the same problem. I just settled with setting IDs to names.length + 1.
@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.
@filipkotanski79116 ай бұрын
I've been following along this tutorial for a last couple of days now, and had no major objections but given how useRef hook was explained to control and update indices for objects is just outrageous. First of all we can't increment indices like that: const [names, setNames] = useState([ { id: idRef.current++, name: "John" }, { id: 2, idRef.current++: "Jane" }, ]); simply because we're going to skip some values each time App component re-renders after clicking Add name button. Secondly you can't update state like that: function addName(){ setNames([...names,{ id: idRef.current++, name:idRef.current.value, }]); inputRef.current.value = ""; } because you are mutating value idRef controlled by React state, what is not allowed in React you should always make a copy which you then mutate. Another issue with this addName function is that it should use updater function in order to queue all changes made to [names] array to make sure we always work with the most up to date version/copy of this array. Here's the corrected code: import { useState, useRef, useEffect } from 'react'; function App() { const idRef = useRef(3); // Initialize to 3 to continue from the last ID used const [names, setNames] = useState([ { id: 1, name: "John" }, { id: 2, name: "Jane" }, ]); const inputRef = useRef(null); // Creating reference for an HTML element useEffect(() => { inputRef.current.focus(); }, []); function onAddName() { const newId = idRef.current++; const newName = inputRef.current.value; setNames((prevNames) => [ ...prevNames, { id: newId, name: newName }, ]); inputRef.current.value = ""; } return ( {names.map((name) => ( {name.id} - {name.name} ))} Add Name ); } export default App;
@treyrader2 жыл бұрын
I am getting duplicate keys error in the useState segment. I wish he'd have explained the reason for introducing that prop rather than just add it as if serves seome necessary functionality. It breaks the app. Also, even after calling a blank string on setName, the input field still doesn't refresh.
@wahajahmed28238 ай бұрын
One of the greate video. 🤩🤩
@nodeSkin Жыл бұрын
This man is just amazing !!!
@manfrombritain6816 Жыл бұрын
this is absolute gold
@jpmitchell925 Жыл бұрын
This is actually gold
@pedros.7947 Жыл бұрын
1:41:51 - Where i last stopped
@tanglesites4 ай бұрын
So I was playing around with this application: And I realized something about state in React. It will eventually all become one big ball of crap sooner or later. This application has two features: Search Feature, and Pokemon Showcase Feature. But architect them into slices is not possible. If I wanted to take the Showcase Feature and add it to another application, the search box feature would have to come along for the ride. Because they are coupled in the reducer. And without the reducer, there is no way to get the list to "react" when the input field is changed without again coupling two components together with state. Polymorphism is out the window. I am new to React, but not to programming. is the answer HOC. Thoughts?
@gilberttorchon1280 Жыл бұрын
Excellent teacher!!!!
@Nir40232 жыл бұрын
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