# The Component Lifecycle **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 2:07am UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208 "2017-03-20T02:07:56Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2017, 2:07am UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/1 "2017-03-20T02:07:56Z")
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](http://www.kirupa.com/react/component_lifecycle.htm) ---
**Author:** ![RohanGurjar](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@RohanGurjar](https://forum.kirupa.com/u/RohanGurjar)\ **Post date:** [December 2, 2017, 2:01pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/2 "2017-12-02T14:01:09Z")
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? ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 2, 2017, 3:18pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/3 "2017-12-02T15:18:03Z")
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. ---
**Author:** ![RohanGurjar](https://avatars.discourse-cdn.com/v4/letter/r/3ec8ea/32.png) [@RohanGurjar](https://forum.kirupa.com/u/RohanGurjar)\ **Post date:** [December 2, 2017, 5:30pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/4 "2017-12-02T17:30:00Z")
@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](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? ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 2, 2017, 5:48pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/5 "2017-12-02T17:48:41Z")
Yup, you got it! ---
**Author:** ![Matth9152](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matth9152/32/8992_2.png) [@Matth9152](https://forum.kirupa.com/u/Matth9152)\ **Post date:** [February 15, 2018, 4:15pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/6 "2018-02-15T16:15:42Z")
`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 ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [February 15, 2018, 4:51pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/7 "2018-02-15T16:51:01Z")
> [@Matth9152](#): > > The code & text don’t seem to match up. 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 ^^ ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [February 15, 2018, 5:25pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/8 "2018-02-15T17:25:24Z")
Thanks for pointing this out @Matth9152! I just updated it to hopefully be correct 🙂 ---
**Author:** ![Matth9152](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/matth9152/32/8992_2.png) [@Matth9152](https://forum.kirupa.com/u/Matth9152)\ **Post date:** [February 15, 2018, 8:07pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/9 "2018-02-15T20:07:41Z")
No problem. Great work on the blog. Really enjoying it! ---
**Author:** ![MountainTrailRover](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mountaintrailrover/32/9219_2.png) [@MountainTrailRover](https://forum.kirupa.com/u/MountainTrailRover)\ **Post date:** [July 30, 2018, 12:25pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/10 "2018-07-30T12:25:27Z")
The Lifecycle Methods URL: [https://www.kirupa.com/react/lifecycle\_example.htm](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! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 30, 2018, 5:00pm UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/11 "2018-07-30T17:00:03Z")
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. 🙂 ---
**Author:** ![MountainTrailRover](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mountaintrailrover/32/9219_2.png) [@MountainTrailRover](https://forum.kirupa.com/u/MountainTrailRover)\ **Post date:** [July 31, 2018, 11:48am UTC](https://forum.kirupa.com/t/the-component-lifecycle/636208/12 "2018-07-31T11:48:17Z")
That worked great! Thanks 🙂