I come from The Odin Project and find this video useful! Especially for beginners. By the way how is your Odin Project adventure going? You guys must come very close to end of Javascript course. I
Yes, it looks like we are getting kind of intermediate-advanced topics right now and I am really grateful to people who contribute this great curriculum that gets me from absolute beginner level to be able to create somewhat good level web apps.
18:43 you dont have the variable error in your state but you referring to this variable and it seems to be working. how does it work? it seems my react is not the same with your react thought I have the latest version
11:50 while explaining shouldComponentUpdate, if the currentProp which is this.props.ignoreProp is not same as nextProps meaning that the prop has changed, we request for render and update. I'm little confused here, cos your code does the opposite of what I'm thinking. Please clarify.
bro because the props have been updated the ignoreProp button have changed the state ignoreProp and hence the prop for the counter component using Math.random() function it would not update the componet ie return false ps - if it would be a case when math.random() generates same number twice then shouldComponentUpdate would have returned true and updated the component hope you understand
I think he's defining his methods in the constructor to avoid having to bind them to 'this' in the constructor. Although I'm not sure why he doesn't just use arrow functions outside of the constructor instead which should accomplish the same thing.
Math.random() returns random floating point value between 0 and 1 , so we can get anything , for eg: 0.67589432 . If you multiply this by 100 --> 67.589432 . And parseInt(67.589432) will return 67 .
if getDerivedStateFromProps is used for setting the state from props why can't it be done in constructor? We have access to props in constructor as well.
So cool, please help me with this. why do you use the methods without using the ".bind(this)" into the constructor? what's the difference between doing in that way from the other way?????
Hi, I have a doubt on ShouldComponentUpdate method implementation. That is, if present value and future value are different , then it should re-render.right? But,here it is not re-render Can any guide me
Shouldn't you have used the prevState parameter while incrementing the state.count value? this way you are editing the state directly its not the best practice, also in Docs using prevState parameter is the best practice
if we need to load up some data from a server, for example, we loaded articles and it contains some comments but data which we have contains the only id of comments. Based on it we need to make a request to receive comments. Do we make this request in ComponentDidUpdate? Because before I did it in componentWillReceiveProps but now it is legacy
Looking at the above comment from Wilson, I think I understand what you're asking. If you want to load comments later on, you will need to do it after your primary data loads (either in the callback or when the promise resolves). Otherwise, you might need some trigger such as clicking a button to show comments, which will make the call.
+Nick Karnick What we ended up doing is creating the action that fetches comments (we were using Redux) and then chaining it to the fetch articles action using ".then". This was done in the ComponentWillMount method. Since we also had comment replies that required the parent comment id, we had a fetch replies button to trigger that event as you suggest.
this.state.mount === true in the initial state. Look at the state in the constructor. So in the initial state disabled = {true} for that button. When mount is updated in state, disabled will also be updated.
does anyone know why does my browser console print twice everything? like it prints "constructor" and "render" twice respectively follow this tutorial.
you must've figured it out by now, but I'll post this for anyone facing this. this behavior of react happens only in development and its there to help us catch bugs ahead of time and its actually a feature and not a weird behavior, you should not opt out of this, but even then if you do then you can remove the wrapper.
He is not referring to functional hooks instead it's component life cycle hooks that's what it is said so don't be confuse i guess in functional hooks and this life cycle hooks!!
@freecodecamp how do you set( this.setState({error, info) ) the error and info to state when it's not initialized in state (this.state), my conditional block is also not running after encountering error in nested component: if (this.state.error) { return Error Found!; }
Check out our React playlist for more React tutorials: ua-cam.com/play/PLWKjhJtqVAbkArDMazoARtNz1aMwNWmvC.html
It's great to see someone who actually used a thing so they can explain the things you would actually need in real world.
Masterpiece example of component lifecycle! Great explanation!
Super clarity. Very calm and concise style, which makes the video easy to ingest.
Yeah seriously. So sick of all the "wacky" programming videos filled with terrible jokes.
I come from The Odin Project and find this video useful! Especially for beginners.
By the way how is your Odin Project adventure going? You guys must come very close to end of Javascript course. I
Yes, it looks like we are getting kind of intermediate-advanced topics right now and I am really grateful to people who contribute this great curriculum that gets me from absolute beginner level to be able to create somewhat good level web apps.
Good to see another Odin Project member here! We're almost at the end, let us finish strong!
Hey fellow odin warrior😃
i wish the odin project gave us more videos like this instead of lengthy articles
Amazing tutorial to grasp concepts and where/how to use lifecycle methods. Thanks for this tutorial!
What an excellent tutorial!
I like class components more than functional components. It feels like you have more control.
Great examples with neat explanation 😍
add props as param in error component..otherwise compile time issue will happen in new version React
Dude, this is so cool. I'm only learning JavaScript now. Just finished Vanilla JS, next up React.
It's been 3 year What going on?
you finished vanilla js???
almost 5 years are you a react master senpai now?
thanks for the awesome video.
I use create-react-app to run the code ,wondering why componentDidCatch won't show parent component but showing error
I also did that and got similar results. If you can please update the comment when you find an error. I'll do the same too.
@@lennygith6254 It's an overlay, you can press the x on top right and get the actual render.
Amazing Bro!!!!!!. Best explaination
ever
18:43 you dont have the variable error in your state but you referring to this variable and it seems to be working. how does it work?
it seems my react is not the same with your react thought I have the latest version
TheLastOne thanks for pointing that out. No idea how I missed that! It works because it is treated as any other method. It isn’t called.
Excellent tutorial , its pragmatic and to the point. Thank you.
Nice explanation
Thanks, this video was very helpful for me.
Perfect Tutorial
You explained amazing ways 👍
Good explaination
11:50 while explaining shouldComponentUpdate, if the currentProp which is this.props.ignoreProp is not same as nextProps meaning that the prop has changed, we request for render and update. I'm little confused here, cos your code does the opposite of what I'm thinking.
Please clarify.
I think it should not update if the props are === rather than !==
bro because the props have been updated
the ignoreProp button have changed the state ignoreProp and hence the prop for the counter component using Math.random() function it would not update the componet ie return false
ps - if it would be a case when math.random() generates same number twice then shouldComponentUpdate would have returned true and updated the component
hope you understand
you made my day thanks
Clear explanations,, very useful.. thanku👍
where ignoreCase comes from? minute 09:02
Thanks. Good Explanation...
This was really useful, thanks!
Thank you so much sir ❤️
Is a good pratice using methods in constructor? i think is not
I think he's defining his methods in the constructor to avoid having to bind them to 'this' in the constructor. Although I'm not sure why he doesn't just use arrow functions outside of the constructor instead which should accomplish the same thing.
at 13:02 why did he used parseInt , doesn't Math.random() returns integer value?
Math.random() returns random floating point value between 0 and 1 , so we can get anything , for eg: 0.67589432 . If you multiply this by 100 --> 67.589432 . And parseInt(67.589432) will return 67 .
Really love your content..!!
why we want to render even if ignore prop is same as before at around 10:59?
We are not rendering if it is same. return false if the prop is same so it won't render
is it not better to use setState by passing it as a function and recording the previous value?
Yup. Otherwise, the state could have already changed. For anyone who is wondering: this.setState(function(prevState, prevProps) {}).
if getDerivedStateFromProps is used for setting the state from props why can't it be done in constructor? We have access to props in constructor as well.
Anand Hegde that will work only during object creation. If props were to change after that then the getDerivedStateFromProps hook is useful.
Great video
So cool, please help me with this. why do you use the methods without using the ".bind(this)" into the constructor? what's the difference between doing in that way from the other way?????
You can use both methods depends of your situation. Using of arrow functions with ES6 is equivalent of binding to constructor
Hi,
I have a doubt on ShouldComponentUpdate method implementation. That is, if present value and future value are different , then it should re-render.right?
But,here it is not re-render
Can any guide me
exactly, it should only re-render or set to true if the present value and the future value are different and not when they are same
Thank you for this :)
Thanks a ton!
Thanks a lot!
good stuff! thank you
You sound just like Beau Carnes lol. Thanks for the content!
Shouldn't you have used the prevState parameter while incrementing the state.count value? this way you are editing the state directly its not the best practice, also in Docs using prevState parameter is the best practice
the functional approach with useEffect() and useState() would be easier imh
Please do a Mantine hooks project
What is the difference when I put the state inside constructor and state outside constructor, what is the difference?
Kevin Adam it’s the same. Within the constructor you have access to props.
im actually watching this now even though it was uploaded 3 years ago.. still very useful
is somebody even watching this old tutorial, other than me?
well... I'm watching it now lol
Hey yo!
are you explaining or showing off how rapid you are on the keyboard?
if we need to load up some data from a server, for example, we loaded articles and it contains some comments but data which we have contains the only id of comments. Based on it we need to make a request to receive comments.
Do we make this request in ComponentDidUpdate?
Because before I did it in componentWillReceiveProps but now it is legacy
Hi, did you solve this? I have the exact same situation. The comments need to be fetched separately and I am not sure which life cycle method to use.
Yes, you should make that request in ComponentDidLoad (If I understand what you're asking correctly).
Looking at the above comment from Wilson, I think I understand what you're asking. If you want to load comments later on, you will need to do it after your primary data loads (either in the callback or when the promise resolves). Otherwise, you might need some trigger such as clicking a button to show comments, which will make the call.
+Nick Karnick What we ended up doing is creating the action that fetches comments (we were using Redux) and then chaining it to the fetch articles action using ".then". This was done in the ComponentWillMount method. Since we also had comment replies that required the parent comment id, we had a fetch replies button to trigger that event as you suggest.
Can anyone answer that why did he used "disable={this.state.mount}"
this.state.mount === true in the initial state. Look at the state in the constructor. So in the initial state disabled = {true} for that button. When mount is updated in state, disabled will also be updated.
my generate see not working, how is that ?
dont know why in my code ,render gets printed twice in console?
Maybe you have out console.log('render') in render() method of App.js as well counter.js
can i get the code??
great video but take "hooks" out of the title, its misleading
ummmm, what type of vs code is this?
cruz I’m using Webstorm in this video. However, I would also recommend checking out CodeSandbox as I’ve used in my recent videos on my channel.
too much focus on secondary LM methods, and not enough on the primary ones
Awesome
Where are the hooks?
does anyone know why does my browser console print twice everything? like it prints "constructor" and "render" twice respectively follow this tutorial.
might have to do with using strict mode
you must've figured it out by now, but I'll post this for anyone facing this.
this behavior of react happens only in development and its there to help us catch bugs ahead of time and its actually a feature and not a weird behavior, you should not opt out of this, but even then if you do then you can remove the wrapper.
Now that react added hooks, this is obsolete.
Typical newbie comment
@@H3000-v7i lmao thats all programming videos. newbies trying to be the one with the information
Here I am browsing through React content to find out why my **** doesn't re-render. XD
Where the heck is hooks?? Misleading title 😐
He is not referring to functional hooks instead it's component life cycle hooks that's what it is said so don't be confuse i guess in functional hooks and this life cycle hooks!!
😊
Thanks
Nyco.....
I watched the entire video and learned very little about React Hooks
Lifecycle Hooks has nothing to do with React Hooks.
❤️❤️❤️
Cannot understand a single thing why what is happening
U have micro for ASMR. Please stop using it for guides.
First comment :)
Not helpful
Please try vue it's more powerful
no, it's just differente
@@GM-xk1nw mention the difference
It's not more powerfull, it's "just" vastly easier to learn and super fun to use
The fact that react is industry standard tells me the opposite
@freecodecamp
how do you set( this.setState({error, info) ) the error and info to state when it's not initialized in state (this.state), my conditional block is also not running after encountering error in nested component:
if (this.state.error) {
return Error Found!;
}