Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Lifecycle - Coggle Diagram
React Lifecycle
2)Updating
1- getDerivedStateFromProps()
2- shouldComponentUpdate()
3- render()
4- getSnapshotBeforeUpdate()
5- componentDidUpdate()
1) Mounting
1- constructor()
Where initial state and initial values are set
Called with the props as arguments
should always start by calling the super(props) before anything else
2- getDerivedStateFromProps()
called right before rendering the element(s) in the DOM.
where the state object is set based on the initial props
3- render()
required, it's the method that outputs HTML to the DOM
4- componentDidMount()
called after the component is rendered.
where we run statements that require DOM elements
3)Unmounting