React Component Lifecycle ( MOUNTING (componentWillMount() (called once.,…
React Component Lifecycle
WHEN STATE UPDATES
Should the next component’s state trigger a re-render?
Returns a default value of true,
if set to false - THE FOLLOWING 3 METHODS WILL NOT BE CALLED.
Use if performance is a bottleneck. ie: set it to false.
Called immediately before rendering, when new props or state are being received.
Not allowed to use this.setState().
THE PAGE LOOKS DIFFERENT NOW!!!
Called immediately after React updates the DOM.
This method gets two arguments.
A common case for this method is when we are using a third-party library that needs the rendered DOM to perform its job — e.g. a jQuery plugin
WHEN PROPS UPDATE
invoked when component is receiving new props
can access the old props via this.props
will not trigger a re-render
these methods are not called for the first render() because the component is already in the DOM.
called once and cached.
shared across all instances.
returns an object
which properties values will be set on this.props
if that prop is not specified by the parent component.
for custom props
only invoked once right before the mounting phase.
return value of this method should be an object
and will be used as initial value of this.state.
for creating custom states outside of React states.
ie: the state of a device that we're using thru an API.
where we define defaults and initial values for this.props & this.state
invoked RIGHT before the component inserts into the DOM.
invoked once and right after DOM is inserted.
The page now has a component already rendered.
DOM has changed. So now it can be accessed.
the process that occurs when a component is being inserted into the DOM.
Perform any cleanup we might need, such as invalidating timers or cleaning up any DOM elements.
Called immediately before component unmounts the DOM.