Tuesday, July 31, 2018

React lifecycle [old]


Constructor:
Bind events
Initialize state.

SetState() won't work here.


ComponentWillMount:
Called before rendering. SetState will not trigger new render.



ComponentDidMount:
Here we can load data from remote endpoint.
Also there is a good place for subscriptions.
SetState() will trigger extra rendering, but user won't see intermediate state.


ComponentWillReceiveProps (nextProps):
Invoked before component receives new properties. Not called with initial properties. May be called even if properties have not changed (parent component causes child component to re-render).

Calling SetState() will not trigger extra rendering.


ShouldComponentUpdate (nextProps, nextState):
Here we can disable rendering if we know that component isn't changed.
Not called for initial for the initial render.
If this method returns "false", then "componentWillUpdate", "render" and "componentDidUpdate" will not be invoked. But child elements of this component still will be re-rendered.


ComponentWillUpdate (nextProps, nextState):
Invoked before rendering when new props or state have received.
Not called for the initial rendering.

SetState or other actions like redux dispatch are forbidden here!


ComponentDidUpdate (prevProps, prevState):
Called after re-rendering. Good place to compare new and old properties and make a network request etc.


ComponentWillUnmount:
Invoked before component is destroyed. Here we can unsubscribe from events, stop timers etc.

No comments:

Post a Comment