Your teaching style seems calming to me. I have watched a lot of React hooks video but this is the only one that clicked. You deserve a lot more subs and views.
This is incredible! It's insane that your 20 minute quick tutorial explained context and reducer well than a 250$ react hooks workshop I recently attended.
I used react in a previous project. Currently I'm working on a project built with Angular. Looking how things have changed with hooks, Angular feels like an old grandma who tells you there's only one way to do it and that's her way.
I feel exactly opposite. React with the inability to really create a singleton for shared state, feels like spaghetti no matter how clean you write it. Don't get me wrong, you can make bad code in any framework, but react seems to force you early on to make the most spaghetti code possible until you gain a mastery of it.
You explain the concepts step by step, slowly building on the top of it when u explain some bigger concepts, that helps a lot. We get the idea , why are we using it! Thanks for the video!
I am glad I found your channel. You are one of a kind that explain so clearly and deeply in a somewhat funny way. Well done. Keep going please. I already shared with other web fellows!
Thank you so much! I also noticed that the text didn't stick around and your answer shows how I can send any value I want to a dispatch method and thereby change the state of the context from anywhere.
Just learning React/Redux this was a bit overwhelming, but a lot is recognized. Fun to see another approach on how to go about React. looks flexible, but that also makes it little harder to understand. I will be back to study this one some more ;-)
I just refactored an entire app with hooks and Axios observables + Redux Observables also, I was willing to use useReducer instead of Redux, but u know, one thing at the time, as a big fan of RxJS - Observables, I could not get away with Redux Observables ( EPICS ) , anyway I'm very happy with the results of refactoring, now its 100% HOOks :)
Hmm, does your useEffectOnce hook make sence, since we can pass an empty array to useEffect's dependencies (2nd argument)? Because your effect still runs on every render tho But interesting usage of ref, wondered to see what is stated in react docs for this usage case
Really nice video! The description of the todo doesn't actually get saved in the localstorage, right? It should be implemented in the onchange of the input, am I wrong?
Cool video, thanks for that, one question about using hooks outside of the components, is that a correct way of doing, because I hear it cause unpredictable behaviour ? 18:00 ( useRef used in a independent function )
Well a nice video to understand advanced hooks provided with react. But one question ... just for curiosity. ... using useRef in the example is more efficient than useEffect with blank array to get it executed once or vice-versa?
After creating useEffectOnce() my todoList kept flickering, why so? Is it because it is still kept re-rendering since each time the data was empty, I mean it was the 'completed` was as it is and the input fields weren't changed *_EDIT_* : figured it out I forgot put the conditiional (if) to check if the didRun.current is false
@@hswolff Yeah because in my opinion enterprise applications have lot of code and typescript is beneficial for large code base...after watching ur channel my expectations have increased I expect much more now from your future vidoes especially from real worl examples....keep it up creative work! 😊
Line 45, I thought useeffect is running constantly without the second argument. So your if statement didrun.current gets called all the time. Or am I mistaken?
In ths react docs, it's not allowed to use conditions (if statements...) or loops (for statements..) in a hook, in this tuto you use it with "useRef" hook (if (!didRun.current){... ) I m confusing if its only allowed with "useRef" hook ??
Great question. You can not conditionally use a hook. I.e. doing if (true) { useRef() } is not allowed. You can however use the results of a hook in conditionals. Does that help?
wish you would explain a bit more the new features, tried to do the app after, got stuck, with useEffect, not really knowing when they get triggered, or what that last [state] array represents. The flow of it all needs explaining, for me at least. Pretty sure i'm not the only one. Otherwise, great tempo, delivery, great job.
Watch the original talk introducing hooks. UseEffect is very well explained there , I think. Dan Abramov explains its main points, and then Ryan Florence goes more in-depth.
I would so so much appreciate it if you could please do this exact tutorial, but with TypeScript. I would love a link to a typescript version of this project, if there is one.
Thank you sir, greatly appreciated! Wonder if you could shortly explain how you'd approach this "issue": I did that when you press enter in the text input, the todo has pure text instead of the input. How would you tackle that? I called a dispatch with a type of 'submit' that sets the text in the state. Then in my TodoItem function I check if text === "" and return 2 different components for each case because of that. Looking for a more elegant solution. Thanks!
I think checking if text === "" is a fine solution to decide what component to render. The source of truth here is "did the user enter in text" and using the value of the text directly to make that decision is the best way to do it!
You can use useContext just like he does in the video at the 10 minute mark. That will be available to any component in the tree wrapped by the provider. Since in this case he's wrapping the whole app in the provider, you could use useContext anywhere in the apps component tree.
Great video, I actually learned a lot being new to react and all. However I know you have video time concerns which is why you must have been going so fast, but I found myself putting back the video a whole lot to catch up on each point. If you went a bit slower and even so made the video a bit longer would be awesome. Cheers
I figured this out. useEffectOnce only runs once because it is called only once.. The useEffect inside it may run many times, but didRun.current is still available to it through javascript closures. Wow! That really stretched my js knowledge. I need to take a nap now. Thanks new dad and recently moved Harry.
Not a stupid question at all! localStorage only accepts strings as keys and values. From developer.mozilla.org/en-US/docs/Web/API/Window/localStorage The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings). So JSON.stringify converts an object to a string so we can store it in storage!
@@cornoc I just asked Dan Abramov this question: Q: Can the reducer in useReducer mutate the state? I know in Redux state should not be mutated, but this question is about the reducer in hooks. A: No, it shouldn’t. (You can use Immer though)
@@cornocYou are still taking about Redux. I'd like to know why immutability is important for Hooks. Dan wrote that the Hooks reducer should not mutate the state, but I'm not clear why.
Your teaching style seems calming to me. I have watched a lot of React hooks video but this is the only one that clicked. You deserve a lot more subs and views.
This is incredible! It's insane that your 20 minute quick tutorial explained context and reducer well than a 250$ react hooks workshop I recently attended.
I used react in a previous project. Currently I'm working on a project built with Angular. Looking how things have changed with hooks, Angular feels like an old grandma who tells you there's only one way to do it and that's her way.
I feel exactly opposite. React with the inability to really create a singleton for shared state, feels like spaghetti no matter how clean you write it. Don't get me wrong, you can make bad code in any framework, but react seems to force you early on to make the most spaghetti code possible until you gain a mastery of it.
Where have you been , the last few months of my life... Love your videos.
A solid example of useReducer, useContext, and useEffect. Welldone, sir
Thank you!
Fluently delivered demonstration of how to use the main React Hooks. Thanks, Harry
You explain the concepts step by step, slowly building on the top of it when u explain some bigger concepts, that helps a lot. We get the idea , why are we using it! Thanks for the video!
I am glad I found your channel. You are one of a kind that explain so clearly and deeply in a somewhat funny way. Well done. Keep going please. I already shared with other web fellows!
Yay! Thank you for spreading the word!
This is the best tutorial video
on Hooks on the planet!
Wow! Amazing! Thank you!
that is a very solid example of good information of react hooks. nice!
thank you! subscribed.
i comment rarely, solid.
Thank you! The comment is super appreciated!
Solid
Getting issue automatically call useEffect more than once
The best video I've seen on react hooks. Big ups Harry
Thank you sir!!
i've watched this video three or four times, it's really good. you're now one of only two youtube notify i've allowed :)
Oh wow! Thank you! Let me know what else you're interested in learning about!
By far the most comprehensive video on the subject !! Thanks a ton. Subscribed.
Thanks for the video, sir! Hopefully, this prevents some people from preemptively jumping to Redux :)
Fast and efficient explanation for hooks in react ! great thanks a lot bro !
nice walkthrough bro. I subbed to your channel!
"Needling the thread" was all I needed to hear to subscribe.
Thank you, got stuck on hooks and this is the perfect video covering the exact usecase I was looking for
Thanks for this. I coded along with this video. Learned a lot about hooks, especially the ones that I found to be confusing.
Excellent! So glad to hear!
Sooo Smooth in 20 mins... Nice Keep posting
Well explained! Nice to see how composing with hooks makes it so easy to make it all look very clean
Thank you! Glad it helped!
The Hooks + Context are clear to me, thanks to you.
Glad this helped explain it!
Holy smokes. First time I've seen your video and I'm delighted :D
Excellent video Harry, thanks for sharing your knowledge with us!
Glad you enjoyed it
Thanks for this! It's nice seeing them all working together, makes it easier to understand!
clear + simple + direct.
thanks~ for no advertisement video ^^
The best I've seen on Hooks, great job! Thank you
Thank you! Glad it helped!
Thanks for the great content. Also, you type insanely fast and I thought I was a fast typer LOL!
Hahah, I should share that story about why I type fast. It's a funny one.
@@hswolff Yesss! Story time!
Great content! That answers way more questions than I had and came for :)
Thank you! This was a great way to walk through the various hooks and explain how they all fit together. My reptile enjoyed it as well.
Hahah good :)
I am very glad I found you. Subscribed.
Hi there, I was wondering what's the difference between just using an boolean instead of useRef then?
You are just amazing! Learnt so many awesome stuff about hooks from you! Just wanna say thank you!
great demo, would have been nice if the text would stick after reload.
Add to reducer:
case "change":
return state.map(item =>
item.id === payload.id ? { ...item, text: payload.value } : item
);
Add to input:
onChange={({ target: { value } }) =>
dispatch({ type: "change", payload: { id, value } })
}
Voila
Thank you so much! I also noticed that the text didn't stick around and your answer shows how I can send any value I want to a dispatch method and thereby change the state of the context from anywhere.
Thanks for the useRef example. That’s one that I never really ‘got’ before. :)
Yeah, useRef is tricky.
Sumptuous architecture. Subbed
Just learning React/Redux this was a bit overwhelming, but a lot is recognized. Fun to see another approach on how to go about React. looks flexible, but that also makes it little harder to understand. I will be back to study this one some more ;-)
Love from India 🇮🇳. Thank you so much for your tutorial.
Woo! Thanks for watching! Glad you liked!
Very nice tutorial amigo. I'm hooked. Humor made me subscribe and I am glad I stumbled upon you :)
Thank you! I’m glad you stumbled here too! Get other people to stumble in! :)
Great video dude... really help. Keep up all yr good work
Nice and clear, you got my sub with this one :)
I just refactored an entire app with hooks and Axios observables + Redux Observables also, I was willing to use useReducer instead of Redux, but u know, one thing at the time, as a big fan of RxJS - Observables, I could not get away with Redux Observables ( EPICS ) , anyway I'm very happy with the results of refactoring, now its 100% HOOks :)
Heck yeah! So great to hear!
Can you make same logic to work by making individual component files,
Nice Explanation. Learned a lot from it.
Awesome!
fantastic video! great pace with good content. subscribed
Hey, thanks! Welcome aboard!
Great videos on Hooks man. They were really helpful. Thanks!
Glad to hear!
Great video! Thanks from Argentina
Pd: I love 12:47 moment
Great course! Explained very easily 👍
Beautiful. The last bit got way too confusing for me. Useref and custom hook with callback. Purpose of making useEffectsOnce?
thanks for your demo. very helpful
Great explanation. Keep up the good work. Subscribed.
Hey, thanks for the sub!
Hmm, does your useEffectOnce hook make sence, since we can pass an empty array to useEffect's dependencies (2nd argument)? Because your effect still runs on every render tho
But interesting usage of ref, wondered to see what is stated in react docs for this usage case
He did explain it was for educational purposes that he was doing that.
Really nice video! The description of the todo doesn't actually get saved in the localstorage, right? It should be implemented in the onchange of the input, am I wrong?
Thanks for such a nice video lecture. Love from India!
You are welcome! Hello India!
I love this no more boilerplate from redux and very easy to use! Thank you for the awesome vid
Wooo! Glad you enjoyed!
love it, great tutorial! i would like to see more examples of advanced hooks.
Glad you liked it!
Thank you sir, Well explained!
Thank you, it was very clear to the point video tutorial. Definitely learned something new
Wonderful! So glad to hear!
Nice explanation!
Cool video, thanks for that, one question about using hooks outside of the components, is that a correct way of doing, because I hear it cause unpredictable behaviour ? 18:00 ( useRef used in a independent function )
Great video! Anything you would do differently with this now in 2020?
great video! have a much better understanding of hooks after this
So glad!
15:15 couldn’t you use useLayoutEffect?
Well explained. Thank you
Is Reducer the same with Redux?
Really Nice! Thank you man!
Well a nice video to understand advanced hooks provided with react.
But one question ... just for curiosity. ... using useRef in the example is more efficient than useEffect with blank array to get it executed once or vice-versa?
Which example is that? Not sure which you're referring to.
After creating useEffectOnce() my todoList kept flickering, why so? Is it because it is still kept re-rendering since each time the data was empty, I mean it was the 'completed` was as it is and the input fields weren't changed
*_EDIT_* : figured it out I forgot put the conditiional (if) to check if the didRun.current is false
Woohoo! Glad you figured it out!
Hey Harry, recently started to follow ur vidoes, and like the way u explain concepts... Please make vidoes using typescript
Thanks for the follow! TypeScript videos is definitely in the queue! Such an exciting topic!
@@hswolff Yeah because in my opinion enterprise applications have lot of code and typescript is beneficial for large code base...after watching ur channel my expectations have increased
I expect much more now from your future vidoes especially from real worl examples....keep it up creative work! 😊
What about performance and useeffect combined with useRef. You created a infinite loop ?
I did? Where?! :o
Line 45, I thought useeffect is running constantly without the second argument. So your if statement didrun.current gets called all the time. Or am I mistaken?
I learned a lot! Thanks Harry!
Yaaay!
React becomes better and better.
Nice video! 👍
Thank you!
In ths react docs, it's not allowed to use conditions (if statements...) or loops (for statements..) in a hook, in this tuto you use it with "useRef" hook (if (!didRun.current){... ) I m confusing if its only allowed with "useRef" hook ??
Great question. You can not conditionally use a hook. I.e. doing if (true) { useRef() } is not allowed. You can however use the results of a hook in conditionals.
Does that help?
Great video. Thanks . I have learned a lot.
Woo! So glad to hear! Thank you!
wish you would explain a bit more the new features, tried to do the app after, got stuck, with useEffect, not really knowing when they get triggered, or what that last [state] array represents. The flow of it all needs explaining, for me at least. Pretty sure i'm not the only one. Otherwise, great tempo, delivery, great job.
Watch the original talk introducing hooks. UseEffect is very well explained there , I think. Dan Abramov explains its main points, and then Ryan Florence goes more in-depth.
@@philtremmerci !!
I like your thank you so much. a happy subscriber, amazing content .. can you do a series on react typescript
I would so so much appreciate it if you could please do this exact tutorial, but with TypeScript.
I would love a link to a typescript version of this project, if there is one.
PS: Finished writing a TypeScript version of it.
Thank you sir, greatly appreciated!
Wonder if you could shortly explain how you'd approach this "issue":
I did that when you press enter in the text input, the todo has pure text instead of the input.
How would you tackle that? I called a dispatch with a type of 'submit' that sets the text in the state.
Then in my TodoItem function I check if text === "" and return 2 different components for each case because of that.
Looking for a more elegant solution. Thanks!
I think checking if text === "" is a fine solution to decide what component to render. The source of truth here is "did the user enter in text" and using the value of the text directly to make that decision is the best way to do it!
@@hswolff Alright, thanks a lot!
Thanks! I enjoyed and learned a lot
question, How do you pass Context to another component(different file), to be able to use dispatch() in that component?
You can use useContext just like he does in the video at the 10 minute mark. That will be available to any component in the tree wrapped by the provider. Since in this case he's wrapping the whole app in the provider, you could use useContext anywhere in the apps component tree.
This is an amazing video.
Great video, I actually learned a lot being new to react and all. However I know you have video time concerns which is why you must have been going so fast, but I found myself putting back the video a whole lot to catch up on each point. If you went a bit slower and even so made the video a bit longer would be awesome. Cheers
Good feedback! Will keep it in mind going forward!
@@hswolff looking forward for more content and spreading the word
Many many thanks for your useful content!
Thanks Harry! this is really cool one 👏
If useEffectOnce ran a second time, why would line 41 (initial setting of didRun) NOT set didRun.current back to false?
I figured this out. useEffectOnce only runs once because it is called only once.. The useEffect inside it may run many times, but didRun.current is still available to it through javascript closures. Wow! That really stretched my js knowledge. I need to take a nap now. Thanks new dad and recently moved Harry.
Thank u for this awesome video
Nicely done sir!
Probably a stupid question, but why do you have to stringify your data when saving it to local storage, and then parse it again on the reset?
Not a stupid question at all! localStorage only accepts strings as keys and values. From developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
So JSON.stringify converts an object to a string so we can store it in storage!
@@hswolff Wow nice, you learn something new every day. Thanks for the reply!
Outstanding Content, subbed!!
My Crocodile says thanks for this video!!
Amazing video! thanks
You are welcome!
Greats videos! Do you have some example how to use callback and usememo?
Great suggestion! That'd be nice to show! I'll add it to my queue of videos!
we learn a lot! thanks!
Woohoo! Glad to hear!
This is so dope! Thanks.
Be ready gas station people, I'm coming.
Thanks for the video!
Haha, thanks!
Does this replace redux? Or at least is moving towards that direction?
It doesn't completely replace Redux. You are correct, it is moving in that direction.
Nice video. Does this work with Chrome redux extension?
It does not. It looks like Redux and acts like Redux...but it's not Redux...
@@hswolff quack
Thanks, this is awesome
Why is the reducer using immutable data? Is this required for hook reducers?
redux.js.org/faq/immutabledata#why-is-immutability-required-by-redux this talks about redux but the reasoning is probably the same
@@cornoc This is Redux though where you need to support time travel.
@@cornoc I just asked Dan Abramov this question:
Q: Can the reducer in useReducer mutate the state? I know in Redux state should not be mutated, but this question is about the reducer in hooks.
A: No, it shouldn’t. (You can use Immer though)
@@les2997 it's not just for time travel, read the full explanation
@@cornocYou are still taking about Redux. I'd like to know why immutability is important for Hooks. Dan wrote that the Hooks reducer should not mutate the state, but I'm not clear why.