https://github.com/emuroiwa/react-concepts/tree/master/src/components/Lifecycle
When a React JS (we should find a short way to write this) component is created it goes through several stages of its lifecycle, React gives us methods we can override. These are the stages below. These methods are for a class component
Mounting
Methods called when a component is created inserted into the dom
constructor, static getDerivedStateFromProps, render, componentDidMount
Updating
Methods called when a component is re-rendering due to changes in props or state
static getDerivedStateFromProps, shouldComponentUpdate, render getSnapshotBeforeUpdate and componentDidUpdate
Unmounting
Methods called when a component is being removed from the DOM
componentWillUnmount
Error Handling
Methods called when there is an error in the component or child component
static getDerivedStateFromError and componentDidCatch
Mounting Phase Methods
We will be listing them in the order of execution.
constructor( props )
- A function that is called when a component is created
- Initializing state and binding event handlers
- super(props)
static getDerivedStateFromProps( props, state )
React docs say this you rarely get to use unless when the state of a component depends on props over time
render()
reads state and props
componentDidMount()
The method is run when the parent and children are rendered to the DOM. Best place to run your HTTP requests
Updating Phase Methods
We will be listing them in the order of execution.
static getDerivedStateFromProps( props, state )
Called when the component is rendered
shouldComponentUpdate( nextProps, nextState )
Used for performance optimization check, dictates whether component should be rendered or not. It returns true or false
render()
The only required method, read state and props and renders JSX. Don’t make HTTP requests or change the DOM
getSnapshotBeforeUpdate( prevProps, prevState )
Called before the changes from the Virtual DOM are reflected in the DOM. Captures info from the DOM. Returns a value or NULL
componentDidUpdate( prevProps, prevState, snapshot )
You can do HTTP calls. Called after render to check if parent and child components have properly re-rendered.
Unmount Phase Methods
componentWillUnmount()
The method called immediately before a component is mounted and destroyed. Uses below
- cancelling and network requests
- cancelling any subscriptions
- invalidating timers