React Hooks Tutorial - 2 - useState Hook
VloĆŸit
- Äas pĆidĂĄn 27. 07. 2024
- đ Courses - learn.codevolution.dev/
đ Support UPI - support.codevolution.dev/
đ Support PayPal - www.paypal.me/Codevolution
đŸ Github - github.com/gopinav
đ± Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
đ« Business - codevolution.business@gmail.com
useState Hook in React
Thank you, for comparing the two ways of doing this - it is the only way inexperienced people (like myself) can genuinely get a grasp around these concepts.
So fresh and so clean! So direct! I am 5 min in, and I know I will be doing this entire series. Thank you playa!
I am new to react and have development work in a week, this series is a booster dose !! Thanks for the amazing content.
Thank you so much, I have read a lot online and watched a couple of tutorial videos as well but still couldn't fully well grasp what hooks are for and how to use this and that. This video is awesome and I understood (finally) what it is for. Thank you for guiding specially inexperienced people like me to be able to understand with clear explanations and comparison of the codes.
You are one of the best online teachers around. Thank you so much!!
I think the same way as you. Thanks!
You have an extremely pleasing pace. Great video. Keep em coming :D
Did Anyone realize how smoothly he asked us to subscribe and enable notifications in between.....
That was amazing!
Yeah I was just about to comment about that
Yes I noticed, Subscribe and Enable Notifications. Thats smart move.
It was soooo smooth that I missed it first time but without re-watching the video I realized where he said that
I exited the video and realized I had already liked and subscribed XD
well explained! even for a newbie its easy to digest, disintegrating every thing in steps, telling the names, purpose and functions of terms, and giving a quick review of things once they are finished, your this video is a must watch for every beginner
Your Tutorials are excellent and very informative. In this example I was not getting the output in classCounter. I researched and found out that I need to bind the incrementCount method in the constructor Class. It would be helpful to update the newbies who don't know this yet.
Being primarily a Java developer (Spring Boot, etc) I was leery of dismissing class components in favor of functional ones. Now I finally understand why this is a better approach. The various hooks, including useState, make this a much easier way to properly organize and configure components. thanks.
I also come from Java but I donât see the advantage of this approach. Would much rather have classes like a real programming language
Excellent video! Thanks a lot for pushing me to go learn about array destructuring first!
amazing explanation in such a clear and comparative way
You explained very well, and the tutorial preparation is excellent. Keep the good work
Love your videos - best on the market - and free! Thank you
6:42-6:53 Oh I see what you did there. Considering the nonchalant tone it is ridiculously brilliant đ
"You can put random names to the variables, like Subscribe or EnableNotifications" Sly!
It was this moment when he knew he'd definitely win more subscribers than usual.
Thanks a lot for explaining concepts like hook in much simpler way
The best Teacher out there!! Thank you.
great job starting off the series
This is the best tutorial available!!!
This is the best React course so far
You're so nice. Thank you for the simple explanation :D
dang, i was kind of confusing on previous vids on destructuring; but after the use of it in this example, i will forever remember this concept =))))
const [subscribes, enableNotification] = useState(0)
your a great teacher, slow and very detailed
yes slow is important
6:53 I see what you did there, you sneaky dog
Super clear explanation! thanks!
It was an excellent tutorial on react js and Hooks .if you also make a tutorial on redux with react it can be lot more helpful.
nice videos Vishwas, it is really great for beginners
thank you very much!!!!
such a good tutorial!
that segway đđ. Btw Awesome Vid!
Very clear and understandable.thank you
You are crazy man..
me: *googles for angular material tutorial
codevolution: hello
me: *googles for react hooks
codevolution: hi again
me: *googles for some else random topic
codevolution: yooooooooo hey
Thank you ; )
Thank you Vishvas!
Best tutorial on react hooks.
omg this is much more simpler than classes!!!
What a beautifull Explanation..
Bhaiya ji aap to dev manus nikle :) :) :)
Very nicely explained.
I am enjoying it
Thanks myannn
Best teacher fr
Awesome job. am a Fan
Big Fan bro. I really love the way you teach. Could you please tutorial video on react jest testing?
Excellent video
super explanation
Are you planning to start a series on React native?
Hooks learning started
Thank you sir đ
Kickass!
You should make use of previous state in this.setState()
Yeah that's the same thing I was thinking
how extension are you using for the shortcuts??
I was trying to find JSX shortcut extensions but none of them had much shortcut
why exactly did we convert setCount(count + 1) into an arrow function? why ??
Hi Vishwas,
Please make tutorial on testing react app using jest and enzyme.....it would be very helpful for new learners like me
Play speed = 1.25 â
Awesome and Informative video though.
thanks!
Thanks
Previous state?? How do u increment counter without it?
It would be safe to use previous state, but for the sake of this example, it works using this.state, because by the time you click the button again, this.state already has a new value. This is my opinion.
Thank you..
thank you
Hi @Codevolution,
Thanks for excellent tutorial but at 10:23 when you mentioned rules, you told not to use hooks inside the condition, nested components and loops would you clarify that portion a bit. Say there is a case for the network request and we are fetching data using anxious inside the then and then changing something on the state, what to do then?
Thanks in advance.
did you get the answer? its been two years since you have had this doubt.
@@ashishrai5720 did you ?
Awesome
He sounds kind of like Bartemius Crouch Senior from harry potter :O
in the class component, why didn't you use the callback function which receives previousState as argument?
Since we are using the previous state to increment the counter shouldn't we setState like this
this.setState(prevState=>({
count: prevState.count+1
}))
Very clear explanation, just one thing don't quite understand. Why define count as const but instead it actually changes?
Are you have any video tutorials for React boilerplate setup with hooks? if you have pls add the link
here array destructuring is different from object destructuring as the useState( ) returns a pair
is it possible to use onClick={()=>this.setState({count:this.state.count+1})} in class component???
class way: class component, state variable, setState in an arrow function
hooks way: func component, useState with array restructuring - variable & method, call that method from arrow function
need a playlist in functional components please!
Rules for Hooks: What is the difference between React functional component and regular JS function??
7:32 I didn't quite get this part. Why did you put setCount() method in an arrow function? What is a 'function call' and why does it specifically need an arrow function?
Hi, that was done because if arrow function was not used, the function would be called directly on page load. In order to avoid that default call, he is using the arrow function. I hope it clarifies.
@@storiesfromincredibleindia That did clarify indeed, thanks :)
@@storiesfromincredibleindia thanks i too always had this doubt
why did he convert the function calls to arrow functions. Can't it be just the functional call?
when to use inline function in onClick setCount(count+1)}>
vs
just a function call like
6:42 nice examples subscribe and enable notification
Please help, I don't really understand why we need to use arrow function at 7:34 ?
Have a question. Why prevState is not used in this example?
Yeah... How can he increment value??
because we only increment it by 1 for 1 click and not by 5 in 1 click?
Yeah, I didnt get that either
But it seems to me that we can use both ways, although the prevState method is more reliable
first of all amazing explanation of the hocks thank you very much
second thing what is the name of the snippet? I don't have the "rfce" in the one that I have
Add 'ES7 React/Redux/GraphQL/React-Native snippets' in VS Code
So glad it's not just me
1000th like! Yay!
Anyone, why did we passs the setCount function on arrow function? onClick={() => setCount(count + 1)}
Please mention diff b/w React functions and Regular Javascript functions
React functions are regular JavaScript functions that takes object of props and return jsx(HTML)
One question: since count is set as const, how can it be changed by every click? Thanks
const cannot change through re-assignment
const cannot be re-declared
but on click we just adding new value to that means to array we are not changing the whole array ,
like const count=[1] ,and const count =[2] gives error
but count.push(2) will not give error
Can someone give the link to the snippet that he is using?
Can someone explain why he didn't bind the event handling while creating class component??thanks in advance
Arrow function function dont need binding
It's a shortcut that Babel let us do. You can just do that instead of manually binding.
Arrow function is one way of binding
He uses increment count function as arrow function
So i hope now u get it
The Moment : You can use any variable name in array destructuring like subscribe and enableNotification đ đ
You said before that whenever you have to update state based on the previous one we need to pass a function as argument to setState
instead of passing in an object. So why you don't stick to that in the class component example? đ
In the third part of this series it is fixed and well explained :)
I have a small question
{count} is incorrect while
setCount(count+1)}>{count} is correct
Why do we need arrow function?
You need to review "ReactJS Tutorial - 13 - Event Handling"
Why we are giving arrow function in onclick
what IDE are you using is this tutorial?
VS Code
increment count is not defined ??
How to persist state on refresh?
Why your App.js component has no render()?
because App.js component is a functional component, not a class component
@@andreiosypchuck5081 Okay thanks! noted. I just discovered this a while ago. Good luck
Can any one tell me , can i use 'useState' in class. Because i try to use it underclass and it is giving me error.
UseState is for stateless (function) components. For class components, use setState instead. You can watch his playlist previous videos or Google it...
I have two questions (Class-based component).
1) How did it work without binding the method in Class component?
2) Without keeping the prevState how is this thing incrementing the count value?
Anyone who knows these answer would be appreciated. Thanks!
when using arrow function then no need of binding this with method used
and using previous state is good way and u will need to use that but here simple count+1 also work but previous state is not stored
like using count+1 again count+1 and many times it will be incremented just by one
@@simple8810 I also wanted to ask for a binding inside of a constructor...Thanks...Save me a lot of time.. Is it always a rule ? Thanks once again.
Any paid service for react js?
count is declared as constant in line 5 , how can it be mutated ?
useState(0) returns an array the const is a reference to array but values inside the array can be changed. in line 5 instead of taking it as an array the tutor directly destructured the array
SetCount function do not mutate LOCAL counter variable.
It changes "state" of Func Comp (React core).
Each time state changes - React call Func Component again, and rerender Component setting a new state VALUE to the NEW local counter variable.
imho.
why they used Array destructuring, why not object destructuring?
Because React.useState() returns an array and not an object.
@@flashfs my question is why Facebook react.js team used array destructuring ?
That I don't know... I think they could have done like an object if they want to. Maybe they thought an array would keep value and setValue more organized. But I really don't know.
:)
3:15 code for the class state
10:23 Rules of hook
RSC
{2022-10-14}