The Component Lifecycle

#1

In the beginning, we started off with a very simple view of components and what they do. As we learned more about React and did cooler and more involved things, it turns out our components aren't all that simple. They help deal with properties, state, events, and often are responsible for the well-being of other components as well. Keeping track of everything components do sometimes can be tough.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/component_lifecycle.htm
#2

Thank you for a wonderful tutorial on React. It really helped me kickstart learning React.
I have a question: I have a confusion between Dealing with state changes and Dealing with prop changes. Now I think I understand Dealing with state changes, for ex, in the article, the state is nothing but the count. But I don’t quite understand what you mean by prop change. Isn’t the prop change (in this case it’s the display property of Counter component) same as state change since it’s mapped to the count variable? In which case do I get to realize the prop change?

#3

The difference between state and props is where the change is coming from. Component state is managed by the component itself. When the component needs to make a change for itself, it changes its own state. Props represent data from outside the component, for example from a parent component. If a parent has some change (maybe originating within some change of its own state) and needs to pass that change, or some related change to a child component, it does it through props. Parent components don’t change child states directly, and components don’t change their own props directly, but each can change. What changes depends on who’s doing the changing.

#4

@senocular Thank you for the explanation. I think I understood it. So, looking at example in the post https://github.com/kirupa/kirupa/blob/master/reactjs/lifecycle.htm , the CounterParent component changes its state based on some condition/action, then it has to propagate that change to its child component which is Counter, and it does this via display prop. Now, CounterParent component is rendered again when its state changes. Also, due to change in prop value of display, Counter component is also updated (along with its state) and rendered again. Is my understanding correct?

1 Like
#5

Yup, you got it!

#6

What we are doing in this snippet of code is checking whether the new value of our id state property is less than or equal to 2. If the value is less than or equal to to 2, we return true to indicate that this component should update. If the value is not less than or equal to 2, we return false to indicate that this component should not update.

Should this not be simply less than 5? The code & text don’t seem to match up. Or I’m missing something! Not sure, haha

1 Like
#7

I think you’re right. Both the value and the property name are off. Instead of id and 2 it should be count and 5. @kirupa ^^

2 Likes
#8

Thanks for pointing this out @Matth9152! I just updated it to hopefully be correct :slight_smile:

2 Likes
#9

No problem. Great work on the blog. Really enjoying it!

#10

The Lifecycle Methods URL: https://www.kirupa.com/react/lifecycle_example.htm is not loading correctly. Console error unreachable code after return statement and nothing loads.

I was able to just copy/paste the code from github and run it locally, but maybe there’s something to do to get the URL working? I just updated Firefox to v57.0.1 to try running React Dev Tools and there was no change from v53.

Cheers!

#11

Yikes. Thanks for pointing it out. Try the link again! The code as it was specified earlier was accurate, but my CDN was interfering and modifying the JS on the fly as part of some preload optimization.

:slight_smile:

#12

That worked great! Thanks :slight_smile:

1 Like