Updating Phase
Whenever new props is drilled down, our component updates and we look at the props and state.
In our case, say our Counter is at 4. Once we update it to 5, the state changes and triggers a render.
The render passes the updated 5 down to the prop. Hence our prevProps.counter.value will be 4, and our this.props.counter.value will b e 5. This signifies that our component did update and there is a change condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class Counter extends Component { componentdidUpdate(prevProps, prevState) { console.log('prevProps', prevProps); console.log('prevState', prevState); if (prevProps.counter.value !== this.props.counter.value) { } } } |
Unmounting Phase
When we delete, the state literally removes that Counter (object) in the array in the App class.
Thus, the change to the state makes App Render. Which then makes NavBar render. Which then makes Counters render.
As each Counter gets rendered, out of the Counters will Unmount because its id-ed object in the array has been removed.
Timers, listeners, all should be cleaned up in Unmount.