Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Component Lifecycle (MOUNTING (componentWillMount() (called once.,…
React Component Lifecycle
UPDATING
WHEN STATE UPDATES
shouldComponentUpdate
()
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.
componentWillUpdate()
Called immediately before rendering, when new props or state are being received.
Not allowed to use this.setState().
render()
THE PAGE LOOKS DIFFERENT NOW!!!
componentDidUpdate()
Called immediately after React updates the DOM.
This method gets two arguments.
prevProps
prevState
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
shouldComponentUpdate()
render()
componentWillUpdate()
componentDidUpdate()
componentWillRecieveProps()
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.
INITIALIZING
getDefaultProps()
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.
invoked first.
for custom props
getInitalState()
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
MOUNTING
componentWillMount()
called once.
invoked RIGHT before the component inserts into the DOM.
invoked first.
componentDidMount()
invoked once and right after DOM is inserted.
this method is the best place for initializing other Javascript libraries and APIs that need access to the DOM and for data fetching operations.
The page now has a component already rendered.
render()
DOM has changed. So now it can be accessed.
the process that occurs when a component is being inserted into the DOM.
UNMOUNTING
componentWillUnmount()
Perform any cleanup we might need, such as invalidating timers or cleaning up any DOM elements.
Called immediately before component unmounts the DOM.