React Component Lifecycle - Hooks / Methods Explained

[@freecodecamp]

Check out our React playlist for more React tutorials: kzbin.info/aero/PLWKjhJtqVAbkArDMazoARtNz1aMwNWmvC

[@Gigatless]

It's great to see someone who actually used a thing so they can explain the things you would actually need in real world.

[@TricoliciSerghei]

Masterpiece example of component lifecycle! Great explanation!

[@fytubevw]

Super clarity. Very calm and concise style, which makes the video easy to ingest.

[@waltervenditti3174]

Yeah seriously. So sick of all the "wacky" programming videos filled with terrible jokes.

[@harunguven8581]

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

[@byslyrten]

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.

[@Fooljuice]

Good to see another Odin Project member here! We're almost at the end, let us finish strong!

[@adarshtiwari7395]

Hey fellow odin warrior😃

[@othmaneelkantaoui9674]

i wish the odin project gave us more videos like this instead of lengthy articles

[@sarvarkhalimov111]

Amazing tutorial to grasp concepts and where/how to use lifecycle methods. Thanks for this tutorial!

[@michaelhashimoto1650]

I like class components more than functional components. It feels like you have more control.

[@VigneshSharma-vrs]

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.

[@voyageruk2002]

I think it should not update if the props are === rather than !==

[@deepakbisht6215]

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

[@PraveenKumar-lp6il]

add props as param in error component..otherwise compile time issue will happen in new version React

[@illb2fast4u]

Dude, this is so cool. I'm only learning JavaScript now. Just finished Vanilla JS, next up React.

[@clashwithcmad]

It's been 3 year What going on?

[@martinwest7250]

you finished vanilla js???

[@Sandeep-zu7gd]

almost 5 years are you a react master senpai now?

[@abhilashpoojary3812]

Great examples with neat explanation 😍

[@ristolibera1295]

What an excellent tutorial!

[@NotTheLastOne]

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

[@nickkarnik9688]

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.

[@danieldejager1847]

Excellent tutorial , its pragmatic and to the point. Thank you.

[@anant1995rawat1995]

Amazing Bro!!!!!!. Best explaination ever

[@leonzchang8790]

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

[@lennygith6254]

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.

[@DrDemolition]

​@@lennygith6254 It's an overlay, you can press the x on top right and get the actual render.

[@ANANDSHARMA-ws2xf]

You explained amazing ways 👍

[@mohamedreejan8143]

Clear explanations,, very useful.. thanku👍

[@reynaoldman9100]

Thanks, this video was very helpful for me.

[@m.a6141]

Perfect Tutorial

[@RafaelSFTech]

Is a good pratice using methods in constructor? i think is not

[@jaredgiangrasso5965]

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.

[@jamshyek]

Nice explanation

[@sulistyoardani7314]

where ignoreCase comes from? minute 09:02

[@adrielamadi8585]

im actually watching this now even though it was uploaded 3 years ago.. still very useful

[@natashakanji3313]

you made my day thanks

[@karangupta725]

why we want to render even if ignore prop is same as before at around 10:59?

[@sagemode37]

We are not rendering if it is same. return false if the prop is same so it won't render

[@BiscuitTech]

This was really useful, thanks!

[@karangupta725]

at 13:02 why did he used parseInt , doesn't Math.random() returns integer value?

[@sagemode37]

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 .

[@mfarim]

Thanks. Good Explanation...

[@rajbannasa7662]

Thank you so much sir ❤️

[@bharathsam4355]

Good explaination

[@VictorGarcia-si8wy]

You sound just like Beau Carnes lol. Thanks for the content!

[@mohammedhasanshaikh4800]

Really love your content..!!

[@viditsharma3929]

is it not better to use setState by passing it as a function and recording the previous value?

[@matrixspielt]

Yup. Otherwise, the state could have already changed. For anyone who is wondering: this.setState(function(prevState, prevProps) {}).

[@anandhegde9345]

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.

[@nickkarnik9688]

Anand Hegde that will work only during object creation. If props were to change after that then the getDerivedStateFromProps hook is useful.

[@CarlWicker]

Great video

[@oskarolortegui9623]

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?????

[@artembelyshev9467]

You can use both methods depends of your situation. Using of arrow functions with ES6 is equivalent of binding to constructor

[@somasundaramb2281]

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

[@adrielamadi8585]

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

[@berkekaancetinkaya8721]

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

[@prathameshausekar]

Thanks a ton!

[@dhrunit1018]

Thank you for this :)

[@someone-on-earth]

the functional approach with useEffect() and useState() would be easier imh

[@harshavamsikalluri]

Thanks a lot!

[@shaifuddin]

Please do a Mantine hooks project

[@martinharrisFTW]

good stuff! thank you

[@karangupta725]

is somebody even watching this old tutorial, other than me?

[@adrielamadi8585]

well... I'm watching it now lol

[@lawrencemichael5571]

Hey yo!

[@keevnx]

What is the difference when I put the state inside constructor and state outside constructor, what is the difference?

[@nickkarnik9688]

Kevin Adam it’s the same. Within the constructor you have access to props.

[@bilelrahmouni01]

are you explaining or showing off how rapid you are on the keyboard?

[@azelsky]

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

[@wilsongaturu134]

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.

[@nickkarnik9688]

Yes, you should make that request in ComponentDidLoad (If I understand what you're asking correctly).

[@nickkarnik9688]

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.

[@wilsongaturu134]

+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.

[@crocodileman7790]

my generate see not working, how is that ?

[@karangupta725]

dont know why in my code ,render gets printed twice in console?

[@sagemode37]

Maybe you have out console.log('render') in render() method of App.js as well counter.js

[@ast453000]

too much focus on secondary LM methods, and not enough on the primary ones

[@kavitasisodiya5846]

Can anyone answer that why did he used "disable={this.state.mount}"

[@ast453000]

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.

[@sivaganesh4489]

Awesome

[@ayushgupta6214]

can i get the code??

[@johndifelice7289]

Where are the hooks?

[@waqaspathan3337]

great video but take "hooks" out of the title, its misleading

[@kingwindie]

ummmm, what type of vs code is this?

[@nickkarnik9688]

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.

[@JenniferStewart100]

Now that react added hooks, this is obsolete.

[@H3000-v7i]

Typical newbie comment

[@spencerknight1730]

@@H3000-v7i lmao thats all programming videos. newbies trying to be the one with the information

[@Jason06245]

does anyone know why does my browser console print twice everything? like it prints "constructor" and "render" twice respectively follow this tutorial.

[@davidlin7968]

might have to do with using strict mode

[@someone-on-earth]

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.

[@sarcasticdna]

❤️❤️❤️

[@abdulghani786]

Where the heck is hooks?? Misleading title 😐

[@echonabin]

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!!

[@vikashnirwal]

Thanks

[@aashikothari3916]

😊

[@shashanksharmadon4295]

Nyco.....

[@zerosku96]

Here I am browsing through React content to find out why my **** doesn't re-render. XD

[@letsmakethat2364]

I watched the entire video and learned very little about React Hooks

[@HaxGuru]

Lifecycle Hooks has nothing to do with React Hooks.

[@nehakhandelwal6237]

Cannot understand a single thing why what is happening

[@vishaljadhav-lf3km]

First comment :)

[@dec23]

Not helpful

[@kinguinkng4403]

U have micro for ASMR. Please stop using it for guides.

[@ahmedmahfouz6339]

Please try vue it's more powerful

[@GM-xk1nw]

no, it's just differente

[@ahmedmahfouz6339]

@@GM-xk1nw mention the difference

[@Deliverant]

It's not more powerfull, it's "just" vastly easier to learn and super fun to use

[@Albertmars32]

The fact that react is industry standard tells me the opposite

[@kwaku_2023]

@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!; }