This whole series is perhaps the best React series that I’ve seen. I like how you’re showing one way, and then another way.. so it is apparent how each change effects whatever you’re doing. That’s very effective for me. Thank you!
I was just about to comment the same thing. The other tutorials were just spitting out lines of code barely explaining what everything does leaving me with some basic app and me still clueless to what I did and back at square one. I actually have a full understanding of state and props now.
0:25 extension ES7 React of Visual Sudio code 4:59 why we should never modify the state directly: the state.count is changed only in console, but not in screen (react does not re-render the component) 9:11: what if we want to execute some code after the state has been changed: use call back function. 11:00 pass afunction to the setState 13:54: summary about setState
Vishwaas you're an amazing teacher. You know how to structure a course and deliver content very well without causing any confusion in the learner's mind. I'm currently on this video and I don't intend to leave my room until I watch the entire series. Thank You so much.
Hi guys, I will leave this here, just in case it could help someone: In the last example, he wrapped in parentheses everything after the "=>" ...I searched for that and found the following: "Using arrow functions with object literals: If you are returning an object literal, it needs to be wrapped in parentheses. This forces the interpreter to evaluate what is inside the parentheses, and the object literal is returned ( example: x => ({ y: x }) )"
It's 2024 and we do not use Classes as much anymore. Focus on functional components and hooks, as they are the future and present of React. However, having a basic understanding of class components is still valuable for working with older codebases and gaining a well-rounded knowledge of React.
@@MEESALASAIMADHUKAR it doesn't matter if they are long gone!, you missing the point of the tutorial! the point is that we should get an overview of React as a library itself and how it works and NOT what is CURRENTLY trending, getting a basic overview of how react works is more important than what is being used in the industry at the moment( you can always easily catch up with the industry if you get the BASICS of REACT right!!!!!!!!!!)... either way follow the tutorial along he does go into functional components as he progresses, good luck!
The best react series anywhere, really. If you read the docs in conjunction to each of these videos, you learn very swiftly. These examples demonstrate the core react/JS fundamentals. Thus is great!
You are a good instructor. A lot of these tutorials give the imporession they are just an experienced programmer showing off. You break down the steps to the level of a beginner React student who doesn't tune into the gobblede goop technical explanations that would make sense to an advanced programmer looking at a single function. Thank you for making this course.
These concepts are really gem & very well presented in this video. I have practically seen this in real time projects where devs tend to perform these misses due to inadequate understanding of these internals
This series is a true gem! I've been watching it in January 2023, even after 4 years, it still holds up. I commend the effort and dedication you put into making these videos. Keep up the fantastic work!
prevState is defined by the setState function. So basically if you add a function to the setState method the argument for the function enter in the setState method is automatically the previous state. It's not predefined by the programmer, it is defined by the setState function.
I am seeing so many good reviews about the course. I have to add my two cents. This is absolutely....phenomenal. Vishwa does a great job, lays out everything so well in manageable size chunks. Thank you very much for putting this together.
In stead of executing your code in the callback function which can get cluttered, you can also make your increment function an async function by placing the async keyword in front and placing the await keyword in front of this.setState(...); This way you can organize your code better. Nice series btw. Keep up the good work!
man u r a legend! u r saying the method prototype structure clearly. setState (object, callback). has disadvantage, so we will use setState(function, callback). Wow and you clearly explained console logs wont be in sync, unless kept in callback (which took me a day to find, luckily reached ur utube video). 1. only 1 big 'div tag in render 2. setState({count: this.state.count+1}) - updates value on screen. this.state = this.state - wont work. - modifying the state directly 3. Calls to setState are asynchrous ie; but console old value - to make it in sync - use in callback func of setState. ie; entire usage of that variable in that file must be inside setState method so that it gets updated value… 4. whenever gonna access prev value of a state and gonna update, always pass a "function with prevState" as 1st parameter, instead of an "object" - like an increment If this method called many times, still value will be increased only once. For this not happen, need to pass previous state as a parameter and in a function. (4th point)
I don't comment on youtube videos but i had to comment this, I went through a lot of react tutorials still i was not able to understand this topic clearly. Your video has helped me alot. Thank you.
Dude basically setState method can take either of the two arguments (a funtion or an object) .. if u decide to pass a func as an arg than u can update the prevState or if u give obj as an arg than u r simply overwriting the prevState!
at 6:01 , since we are using "this" in the context of the increment function shouldn't it be undefined? But the increment function is running fine here edit: Okay now, it seems that if you call the function in an arrow function in the event of onClick it will work as react for us binds the "this" keyword and hence it works fine
THank you a ton, u are the only one explaning so explicitly setState() the second parameter and when/why to use it(after I watched 4 other tutorials with more subs and view counts), u should get more subs! also repost in another video
Very thankfull to your videos, following complete playlist and feeling like more confident then ever. Still 2024, these videos are working for us. Thank you 🙏
Hi guys, even I was confused about the prevState but since he spoke about passing function as args I tried below and it works: prevState() { //function to return currentState value return this.state.count; } increment() { this.setState(prevState => ({ //use abv function to get current value count: prevState.count + 1})) console.log(this.state.count) } Hope this helps and I'm a beginner too so feel free to correct me if any mistake
simple soluation for all that code : instead of using call back function in setState and in last example using arrow function as a parameter to setSate , you can just make: this.state.count +=1 instead of this.state.count +1 . I wish it help someone.
@Codevolution in 7:06 it means this.state.count is only updated after the render phase, so how react performs reconciliation to decide to update the DOM node or not ?
I think the point is that react won't re-render unless you use setState . Think of it like useEffect in a functional component with a dependency array. React has determined that setState is one of those dependencies and will re-render when setState is used, but a manual change of state will not.
9:00 whenever you need to execute code after state has been changed then we should NOT write such code after setState method, instead we must write such code as second param to setState method.
While the explanation is very clear I don't see a reason why React has made it so complicated to perform a simple operation. I think it is the frameworks/ libraries job to know how to optimize the code written by the developers while the developers should think on how to deliver the real business value. Just compare what he does with this angular code and see how simple it is. Also no need to keep in mind all these problems with async code and all that. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` Count - {{count}} Increment ` }) export class AppComponent { count = 0; increment() { this.count++; } incrementFive() { this.increment(); this.increment(); this.increment(); this.increment(); this.increment(); } }
Everything has been explained quite well except the "prevState" part. It is said that we need to parse in a function as an argument to update state based on the previous state, so I guess "prevState" is a function that was defined somewhere but somehow we were not showed?
Although I'm a novice, and it might be a tad bit late to respond to your question, however here are my thoughts: You can actually name the 1st arguement of the callback inside the setState anything. The catch is: When you pass a callback func as 1st parameter in the setState method, the argument of the callback is nothing but the current state. Now since we intend to change it, he has named it as prevState. If you do console.log (prevState) - before line 23 in the code shown at @12:31, you'll see that prevState is nothing but the current state. Again, I might be wrong, as I'm still learning from this tutorial, so if you already have an answer, feel free to correct me.
Wouldnt doing increment(value){ this.setState( { count: this.state.count + value }, () => { console.log(this.state.count); } ); } and then incrementFive(){ this.increment(5); } also work? Can you explain the difference?
Yep that works fine. There is literally no difference, he used five calls of increment function to visually represent what would happen if you call that function 5 times with the first version of function. Your example works normally and its a shorter solution for this one, he used the "wrong" way just to describe a common beginner mistake.
Hi Vishwas, at 12:15 you pressed some short cut key and document formatted like (prevState) => () became prevState => (). How did you do that? I tried shift+alt+F but it didn't work for me please explain? This is the best React course I have taking and its covering almost every concept in very simple way. Thanks vishwas and keep going...
i just wanted to know how the parameter you defined ''prevState''' as function can access .count without actually defining it and even not producing any error, is it predefined function in react to give access over all the states?
Hi, I come to the incrementFive() method and realized it does the work even without changing from the object literal to the function call. Is there any update on this?
Hi man! your lessons are very clear and understandable, But i have question. in Your videos in 12:58 minutes you are trying to increment count by 5 but in this.setState(prevState =>({ count: prevState.count +1}) ? why is that ? could you clarify it please thank you in advance .😊😊
I still don't get how prevState makes the difference. All it does is same as passing {count:this.state.count+1} object. Are you saying just because we are passing a function instead of an object, there is a difference? Moreover how do weknow that prevState is a state object? Where is the parameter passed to the callback function?
Although I'm a novice, and it might be a tad bit late to respond to your question, however here are my thoughts: You can actually name the 1st arguement of the callback inside the setState anything. The catch is: When you pass a callback func as 1st parameter in the setState method, the argument of the callback is nothing but the current state. Now since we intend to change it, he has named it as prevState. If you do console.log (prevState) - before line 23 in the code shown at @12:31, you'll see that prevState is nothing but the current state. Again, I might be wrong, as I'm still learning from this tutorial, so if you already have an answer, feel free to correct me.
This whole series is perhaps the best React series that I’ve seen. I like how you’re showing one way, and then another way.. so it is apparent how each change effects whatever you’re doing. That’s very effective for me. Thank you!
I was just about to comment the same thing. The other tutorials were just spitting out lines of code barely explaining what everything does leaving me with some basic app and me still clueless to what I did and back at square one. I actually have a full understanding of state and props now.
@@adamnoah121 I feel exactly the same.
0:25 extension ES7 React of Visual Sudio code
4:59 why we should never modify the state directly: the state.count is changed only in console, but not in screen (react does not re-render the component)
9:11: what if we want to execute some code after the state has been changed: use call back function.
11:00 pass afunction to the setState
13:54: summary about setState
oww dude, You are really amazing
Vishwaas you're an amazing teacher. You know how to structure a course and deliver content very well without causing any confusion in the learner's mind. I'm currently on this video and I don't intend to leave my room until I watch the entire series. Thank You so much.
Hi guys, I will leave this here, just in case it could help someone: In the last example, he wrapped in parentheses everything after the "=>" ...I searched for that and found the following: "Using arrow functions with object literals: If you are returning an object literal, it needs to be wrapped in parentheses. This forces the interpreter to evaluate what is inside the parentheses, and the object literal is returned
( example: x => ({ y: x }) )"
Wow.....I came to the comment section looking for answer to this..and here comes an angel...thank you
thanks , i came here to look that .
thanks @Natalia
Thanks a lot @Natalia.Came here to find the answer for this only
You saved my day nat thank you very much
The quality of these videos are superb, just look at the like to dislike ratio
It's 2024 and we do not use Classes as much anymore. Focus on functional components and hooks, as they are the future and present of React. However, having a basic understanding of class components is still valuable for working with older codebases and gaining a well-rounded knowledge of React.
so classes are long gone?
i tried to tell my tutor this but he didnot listen.
@@MEESALASAIMADHUKAR it doesn't matter if they are long gone!, you missing the point of the tutorial!
the point is that we should get an overview of React as a library itself and how it works and NOT what is CURRENTLY trending, getting a basic overview of how react works is more important than what is being used in the industry at the moment( you can always easily catch up with the industry if you get the BASICS of REACT right!!!!!!!!!!)... either way follow the tutorial along he does go into functional components as he progresses, good luck!
The best react series anywhere, really. If you read the docs in conjunction to each of these videos, you learn very swiftly. These examples demonstrate the core react/JS fundamentals. Thus is great!
I like how you create various scenarios to demonstrate important react concepts.
I think, probably you are the best teacher on youTube for react. The way you explain each and every concept is really amazing.
One of the best React lessons in RUclips! Clear and easy to understand!
Hello Vishwas... Loving this series so far! I love the way you teach and leave no stones unturned while explaining a concept... Thank You V!
You are a good instructor. A lot of these tutorials give the imporession they are just an experienced programmer showing off. You break down the steps to the level of a beginner React student who doesn't tune into the gobblede goop technical explanations that would make sense to an advanced programmer looking at a single function. Thank you for making this course.
These concepts are really gem & very well presented in this video. I have practically seen this in real time projects where devs tend to perform these misses due to inadequate understanding of these internals
this has to be one of the best React Tutorial playlists i've seen thank you so much for the content !
All I ever wanted from you was to click on the INCREMENT button more than once :(
I am losing my mind cause how correct you are.
😭
Seriously the best explanation available on this subject, even compared to paid courses. Thank you so much!
This series is a true gem! I've been watching it in January 2023, even after 4 years, it still holds up. I commend the effort and dedication you put into making these videos. Keep up the fantastic work!
Did you completed the series?
@@amitshaw193 yes
but ppl and companies don't use class functions that much nowadays , u sure it's ok to watch the course ?
prevState is defined by the setState function. So basically if you add a function to the setState method the argument for the function enter in the setState method is automatically the previous state. It's not predefined by the programmer, it is defined by the setState function.
can you explain it another way, what I understood is that when we try to use a function as recursion call we need to use prevState right?
I like your way of speaking, it is slow and it helps me understand a little better since I don't have much knowledge of the language
3:00 within render method in class type component we call object named as this state along with its key named as count
took 1hr to completely understand this 15 min video.. worth it
Your teaching style is fantastic and awesome. My standing ovation for this course.
This is how one should learn any topic, covering every details nice
I am seeing so many good reviews about the course. I have to add my two cents. This is absolutely....phenomenal. Vishwa does a great job, lays out everything so well in manageable size chunks. Thank you very much for putting this together.
Your explanations are better than online courses
In stead of executing your code in the callback function which can get cluttered, you can also make your increment function an async function by placing the async keyword in front and placing the await keyword in front of this.setState(...); This way you can organize your code better.
Nice series btw. Keep up the good work!
man u r a legend!
u r saying the method prototype structure clearly. setState (object, callback). has disadvantage, so we will use setState(function, callback). Wow and you clearly explained console logs wont be in sync, unless kept in callback (which took me a day to find, luckily reached ur utube video).
1. only 1 big 'div tag in render
2. setState({count: this.state.count+1}) - updates value on screen.
this.state = this.state - wont work. - modifying the state directly
3. Calls to setState are asynchrous
ie; but console old value - to make it in sync - use in callback func of setState.
ie; entire usage of that variable in that file must be inside setState method so that it gets updated value…
4. whenever gonna access prev value of a state and gonna update, always pass a "function with prevState" as 1st parameter, instead of an "object" - like an increment
If this method called many times, still value will be increased only once. For this not happen, need to pass previous state as a parameter and in a function. (4th point)
Thanks alot for your valuable time and effort in making these videos.
This is the kind of tutorial, I was looking for. Its a great place to learn new languages. Thanks a lot Vishwas!
Extremely well put together tutorial. You have set the gold standard.
7:23 setState has two params where first param is this setState and second param is fat arrow callback function
im loving this series already, thank you evolution 🙏
Just wanted to say thankyou for this amazing series !
I don't comment on youtube videos but i had to comment this, I went through a lot of react tutorials still i was not able to understand this topic clearly. Your video has helped me alot. Thank you.
do not understand how the prevState value is updated when passing through setState method
This is my issue too.
Dude basically setState method can take either of the two arguments (a funtion or an object)
.. if u decide to pass a func as an arg than u can update the prevState or if u give obj as an arg than u r simply overwriting the prevState!
Instead of like this we can directly pass props to jsx function--
// import React from "react";
import React, { Component } from 'react'
class Increment extends Component {
constructor(props) {
super(props)
this.state = {
count:0
}
}
incre(count){
this.setState({
count:count+1
})
}
decre(count){
this.setState({
count:count-1
})
console.log(count)
console.log(this.state.count)
}
render() {
return (
count : {this.state.count}
this.incre(this.state.count)}>Increment
this.decre(this.state.count)}>Decrement
)
}
}
export default Increment
2:22 this state is an object and its property aka key is assigned a value within constructor
4:44 without setState it should be noted that value on browser does not change
Thanks to vishwas, ur knowledge help me to do my office project.
Thank You
you are the best Vishwas!!
I liked your video. Very instructive and easy to understand.
at 6:01 , since we are using "this" in the context of the increment function shouldn't it be undefined? But the increment function is running fine here
edit: Okay now, it seems that if you call the function in an arrow function in the event of onClick it will work as react for us binds the "this" keyword and hence it works fine
Watching your videos. I must say you are really really amazing teacher. You present really well. Good luck
THank you a ton, u are the only one explaning so explicitly setState() the second parameter and when/why to use it(after I watched 4 other tutorials with more subs and view counts), u should get more subs! also repost in another video
Very thankfull to your videos, following complete playlist and feeling like more confident then ever.
Still 2024, these videos are working for us.
Thank you 🙏
Hi guys,
even I was confused about the prevState but since he spoke about passing function as args I tried below and it works:
prevState() { //function to return currentState value
return this.state.count;
}
increment() {
this.setState(prevState => ({ //use abv function to get current value
count: prevState.count + 1}))
console.log(this.state.count)
}
Hope this helps and I'm a beginner too so feel free to correct me if any mistake
That cleared a lot of things for me. Thanks for the tutorial bro!!!
This React series is best as can and I an thankful too you. In frist two videos I had my doubts but now I have no doubt.
you are the best teacher in the world.
Sir ur teaching is simply superb and nice explanation
A very thorough explanation thanx a lot. I understand react simply because of your tutorial. A million thanks 👏👏👏
I'm really enjoying your series. Thank you so much.
550 likes vs 3 dislikes. Brilliant quality and highly underrated!
I feel I chose the right channel for React Tutorial
man i am sure some one has said your voice is like juhar singh the media person...amazing similarity in voice...any way great lecuture indeed
Your explaination is awesome.Helping me lot to understand react concept.
Amazing! You are such a great teacher
I've pressed the like button three times👍👍👍. your video helps me a lot to learn react quickly
I love you Vishwazzz. Peace be upon thee, broov.
7:07 console log is called before setState
codevolution this is amazing. very simple and structured !!
Thanks , i didn't knew about 2nd parameter in setstate which is a callback function that helps in using modified state value .
very convincing and impressive presentation
simple soluation for all that code : instead of using call back function in setState and in last example using arrow function as a parameter to setSate , you can just make: this.state.count +=1 instead of this.state.count +1 .
I wish it help someone.
For the 'rce' then Tab trick to work, you must install the 'ES7 React/Redux/GraphQL/React-Native' extension for vscode.
how to do that
@@akhilays go to add extensions and search the term and download it.
@@IronMan-wz8dx thank you Jim you are really awesome 🤪
3:33 button has onClick event with fat arrow function containing this Function
You are amazing man..Thanks for these free million dollar stuffs
@Codevolution
in 7:06 it means this.state.count is only updated after the render phase, so how react performs reconciliation to decide to update the DOM node or not ?
I think the point is that react won't re-render unless you use setState . Think of it like useEffect in a functional component with a dependency array. React has determined that setState is one of those dependencies and will re-render when setState is used, but a manual change of state will not.
Very detailed explanation about each concept much appreciated....:)
Actually you missed to change the code from Increment Five to Increment. Otherwise, the code is working perfectly fine.
loved the content and the way you explained with do's and dont's❤❤👏👏👏👏
I am fan of your course. thanks for your teaching.
very well explained. much better than any udemy course :-)
9:00 whenever you need to execute code after state has been changed then we should NOT write such code after setState method, instead we must write such code as second param to setState method.
best React tutorial! Thanks!
While the explanation is very clear I don't see a reason why React has made it so complicated to perform a simple operation. I think it is the frameworks/ libraries job to know how to optimize the code written by the developers while the developers should think on how to deliver the real business value. Just compare what he does with this angular code and see how simple it is. Also no need to keep in mind all these problems with async code and all that.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Count - {{count}}
Increment
`
})
export class AppComponent {
count = 0;
increment() {
this.count++;
}
incrementFive() {
this.increment();
this.increment();
this.increment();
this.increment();
this.increment();
}
}
Hello if it's possible ,please make a full tutorial on react NATIVE ....tnx
In spite of writing call back function we can also write code as count:this. state.count+=1. It also gives same response.
Is prevState already defined variable of class Component in React or it is simple user defined parameter?
It is user defined. But I don't understand how it holds the state value.
@@arpansatpathi9645 same . Didnt understand how the count obj knows the value of prevState when incrementing it
@@lawn_mower4941 same here. It's been two months, do you know now how it works?
Thankyou for your amazing tutorials
I def have to rewatch this one
great series you covered everything and details
Everything has been explained quite well except the "prevState" part. It is said that we need to parse in a function as an argument to update state based on the previous state, so I guess "prevState" is a function that was defined somewhere but somehow we were not showed?
Although I'm a novice, and it might be a tad bit late to respond to your question, however here are my thoughts: You can actually name the 1st arguement of the callback inside the setState anything. The catch is: When you pass a callback func as 1st parameter in the setState method, the argument of the callback is nothing but the current state. Now since we intend to change it, he has named it as prevState.
If you do console.log (prevState) - before line 23 in the code shown at @12:31, you'll see that prevState is nothing but the current state. Again, I might be wrong, as I'm still learning from this tutorial, so if you already have an answer, feel free to correct me.
Wouldnt doing
increment(value){
this.setState(
{
count: this.state.count + value
},
() => {
console.log(this.state.count);
}
);
}
and then
incrementFive(){
this.increment(5);
}
also work? Can you explain the difference?
Yep that works fine. There is literally no difference, he used five calls of increment function to visually represent what would happen if you call that function 5 times with the first version of function. Your example works normally and its a shorter solution for this one, he used the "wrong" way just to describe a common beginner mistake.
1:06 rce is snippet for class type component
Which extension are you using which makes the arrows in arrow function looks like a perfect arrow rather than like =>
Hi Vishwas, at 12:15 you pressed some short cut key and document formatted like (prevState) => () became prevState => (). How did you do that? I tried shift+alt+F but it didn't work for me please explain?
This is the best React course I have taking and its covering almost every concept in very simple way.
Thanks vishwas and keep going...
He just saved the code and the code was formatted.. Automatically.. It's because of an extension in the vscode known as prettier
completed 11th Video. Thank you 🙂
i just wanted to know how the parameter you defined ''prevState''' as function can access .count without actually defining it and even not producing any error, is it predefined function in react to give access over all the states?
Im confused about this too, does anyone have an answer
Why we are using this in increment function can we use only increment()?
Hi, I come to the incrementFive() method and realized it does the work even without changing from the object literal to the function call. Is there any update on this?
Hi man!
your lessons are very clear and understandable, But i have question. in Your videos in 12:58 minutes you are trying to increment count by 5 but in this.setState(prevState =>({ count: prevState.count +1})
? why is that ? could you clarify it please thank you in advance .😊😊
Because we are calling incremental function 5 times in incrementby5 function
I still don't get how prevState makes the difference. All it does is same as passing {count:this.state.count+1} object. Are you saying just because we are passing a function instead of an object, there is a difference? Moreover how do weknow that prevState is a state object? Where is the parameter passed to the callback function?
This is great stuff!! Thank you so much for this!!
12:12 usage of prevState instead of current state
Thanks for such a great video, I am confused about the previous value of state....11:55 where it come from?
Although I'm a novice, and it might be a tad bit late to respond to your question, however here are my thoughts: You can actually name the 1st arguement of the callback inside the setState anything. The catch is: When you pass a callback func as 1st parameter in the setState method, the argument of the callback is nothing but the current state. Now since we intend to change it, he has named it as prevState.
If you do console.log (prevState) - before line 23 in the code shown at @12:31, you'll see that prevState is nothing but the current state. Again, I might be wrong, as I'm still learning from this tutorial, so if you already have an answer, feel free to correct me.
Sir, you are the best.
I'm getting an error-super expression must be either null or function ,not undefined ,how can I solve it?
thank you for this beautiful content
😍😍😍
5:55 this setState has power to change value of key