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.
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 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.
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!
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 :)
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?
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.
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 )
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
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
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?
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.
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.
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?
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!
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.
@@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! 😊
I feel like you kinda skipped explaining why you put an empty array as your second param for your useEffect. This second paramater expects an array of dependencies. If any item in this array is changed, this useEffect will fire the callback function you passed to it. By using an empty array by default it will only run the callback once when the component mounts.
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!
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.
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
Great video, I'm still struggling with app organization, as a beginner, learning how to "react" to states using redux and they change so many things it's not impossible, but hard to keep up with. Sorry to say, but this empty array/useRef are not that clear why at first, we have to be used with the api and docs, but thanks for your explanation.
@@hswolff I think not so specific. May need get used with the new Api. Was looking for comments from other people and could see a few thinks same as I do, that this useEffect gonna be hard to predict for beginners. Another hard change could be app folder organization. I'm new to this, you may not know how hard is to wakeup everyday with a "Use this way, not this way" as I'm still learning, sometimes preferring a really more opinionated way to do, because I don't see (yet) how could use like we do now with redux and async calls (like thunk and saga). But loved how we're directing for less class for those who won't use and more functional JS. Maybe a video could be: "Doing with Hook as we did with Redux before" or... "See? It doesn't bite." Sorry to take your time, I'm pleased to meet the channel.
Thank you for the reply! I think Redux still does things that Hook doesn't do. There is overlap however I haven't fully discovered what that overlap is. If I do I'll happily make a video, but while I'm still learning I'll say nothing :)
@@FernandoPonteFilho I wouldn't spend much time worrying about folder organization. I did this when I first started out, and never came to any solid conclusion. Organization can change depending on the type of project. Just start with a flat structure of all of your files in one directory. As the project grows you may start to notice related files. When you've identified these related files, put them into a single directory. As you become more experienced you will come to your own conclusions on how to organize your app. The nice thing about React is it's much easier to move things around and refactor than a typical framework.
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.
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!
Fluently delivered demonstration of how to use the main React Hooks. Thanks, Harry
A solid example of useReducer, useContext, and useEffect. Welldone, sir
Thank you!
Where have you been , the last few months of my life... Love your videos.
This is the best tutorial video
on Hooks on the planet!
Wow! Amazing! Thank you!
Thanks for the video, sir! Hopefully, this prevents some people from preemptively jumping to Redux :)
that is a very solid example of good information of react hooks. nice!
thank you! subscribed.
By far the most comprehensive video on the subject !! Thanks a ton. Subscribed.
The best video I've seen on react hooks. Big ups Harry
Thank you sir!!
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.
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!
Fast and efficient explanation for hooks in react ! great thanks a lot bro !
Thank you, got stuck on hooks and this is the perfect video covering the exact usecase I was looking for
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!
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!
Sooo Smooth in 20 mins... Nice Keep posting
The Hooks + Context are clear to me, thanks to you.
Glad this helped explain it!
Thanks for this! It's nice seeing them all working together, makes it easier to understand!
Holy smokes. First time I've seen your video and I'm delighted :D
The best I've seen on Hooks, great job! Thank you
Thank you! Glad it helped!
"Needling the thread" was all I needed to hear to subscribe.
I am very glad I found you. Subscribed.
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!
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 :)
Excellent video Harry, thanks for sharing your knowledge with us!
Glad you enjoyed it
Hi there, I was wondering what's the difference between just using an boolean instead of useRef then?
Great course! Explained very easily 👍
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 ;-)
You are just amazing! Learnt so many awesome stuff about hooks from you! Just wanna say thank you!
Great content! That answers way more questions than I had and came for :)
clear + simple + direct.
thanks~ for no advertisement video ^^
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!
nice walkthrough bro. I subbed to your channel!
Love from India 🇮🇳. Thank you so much for your tutorial.
Woo! Thanks for watching! Glad you liked!
Beautiful. The last bit got way too confusing for me. Useref and custom hook with callback. Purpose of making useEffectsOnce?
I love this no more boilerplate from redux and very easy to use! Thank you for the awesome vid
Wooo! Glad you enjoyed!
Nice Explanation. Learned a lot from it.
Awesome!
Great videos on Hooks man. They were really helpful. Thanks!
Glad to hear!
i comment rarely, solid.
Thank you! The comment is super appreciated!
Solid
Getting issue automatically call useEffect more than once
Thanks for the useRef example. That’s one that I never really ‘got’ before. :)
Yeah, useRef is tricky.
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?
Great video! Thanks from Argentina
Pd: I love 12:47 moment
Great video dude... really help. Keep up all yr good work
Sumptuous architecture. Subbed
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 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.
fantastic video! great pace with good content. subscribed
Hey, thanks! Welcome aboard!
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! :)
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 )
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.
Can you make same logic to work by making individual component files,
Thanks for such a nice video lecture. Love from India!
You are welcome! Hello India!
Nice and clear, you got my sub with this one :)
Thank you, it was very clear to the point video tutorial. Definitely learned something new
Wonderful! So glad to hear!
Is Reducer the same with Redux?
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.
15:15 couldn’t you use useLayoutEffect?
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!
love it, great tutorial! i would like to see more examples of advanced hooks.
Glad you liked it!
Great explanation. Keep up the good work. Subscribed.
Hey, thanks for the sub!
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?
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.
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.
React becomes better and better.
Nice video! 👍
Thank you!
great video! have a much better understanding of hooks after this
So glad!
Thanks Harry! this is really cool one 👏
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?
Great video! Anything you would do differently with this now in 2020?
thanks for your demo. very helpful
Thank you sir, Well explained!
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!
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 !!
Nice explanation!
Really Nice! Thank you man!
Nicely done sir!
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! 😊
I learned a lot! Thanks Harry!
Yaaay!
I feel like you kinda skipped explaining why you put an empty array as your second param for your useEffect. This second paramater expects an array of dependencies. If any item in this array is changed, this useEffect will fire the callback function you passed to it. By using an empty array by default it will only run the callback once when the component mounts.
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!
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.
Many many thanks for your useful content!
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
Well explained. Thank you
Outstanding Content, subbed!!
I like your thank you so much. a happy subscriber, amazing content .. can you do a series on react typescript
Thank u for this awesome video
Thanks! I enjoyed and learned a lot
This is an amazing video.
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.
This is so dope! Thanks.
Great video. Thanks . I have learned a lot.
Woo! So glad to hear! Thank you!
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!
This is what I need!!!
we learn a lot! thanks!
Woohoo! Glad to hear!
Thanks, this is awesome
this was awesome
Great video!
Great video, I'm still struggling with app organization, as a beginner, learning how to "react" to states using redux and they change so many things it's not impossible, but hard to keep up with.
Sorry to say, but this empty array/useRef are not that clear why at first, we have to be used with the api and docs, but thanks for your explanation.
Anything in specific you're confused about?
@@hswolff I think not so specific. May need get used with the new Api. Was looking for comments from other people and could see a few thinks same as I do, that this useEffect gonna be hard to predict for beginners.
Another hard change could be app folder organization. I'm new to this, you may not know how hard is to wakeup everyday with a "Use this way, not this way" as I'm still learning, sometimes preferring a really more opinionated way to do, because I don't see (yet) how could use like we do now with redux and async calls (like thunk and saga).
But loved how we're directing for less class for those who won't use and more functional JS.
Maybe a video could be: "Doing with Hook as we did with Redux before" or... "See? It doesn't bite."
Sorry to take your time, I'm pleased to meet the channel.
Thank you for the reply!
I think Redux still does things that Hook doesn't do. There is overlap however I haven't fully discovered what that overlap is. If I do I'll happily make a video, but while I'm still learning I'll say nothing :)
@@hswolff No, I thank you. Hope we finally get this more clearly.
@@FernandoPonteFilho I wouldn't spend much time worrying about folder organization. I did this when I first started out, and never came to any solid conclusion. Organization can change depending on the type of project. Just start with a flat structure of all of your files in one directory. As the project grows you may start to notice related files. When you've identified these related files, put them into a single directory.
As you become more experienced you will come to your own conclusions on how to organize your app. The nice thing about React is it's much easier to move things around and refactor than a typical framework.