Find out React Lifecycle events and how to use them
React components can have multiple lifecycle event hooks.
Hooks allow functional components to also access them in different ways.
Throughout the life cycle of a component, a series of events will be called. For each event, you can hook and provide custom functions.
What hook is most suitable for what function, we will see here.
First, the React component life cycle is divided into three phases:
- installation
- updating
- Uninstalling
Let's learn more about these three stages and the methods called in each stage.
installation
When mounting, before mounting the component in the DOM, you have 4 life cycle methods:constructor
,getDerivedStateFromProps
,render
withcomponentDidMount
.
Builder
The constructor is the first method called when the component is installed.
Generally, you can use the constructor to set the initial state with the following command:this.state = ...
.
getDerivedStateFromProps()
When the country relies on propsgetDerivedStateFromProps
Can be used to update the status based on the props value.
It was added in React 16.3 and aims to replacecomponentWillReceiveProps
Not recommended method.
Using this method, you cannot accessthis
Because it is a static method.
This is a pure method, so it does not cause side effects and should return the same output when called multiple times with the same input.
Returns the object with the updated element (if the state does not change, it returns null)
Make ()
From the render() method, you return the JSX that builds the component interface.
This is a pure method, so it does not cause side effects and should return the same output when called multiple times with the same input.
componentDidMount()
This method is used to perform API calls or process operations on the DOM.
updating
When updating, you have 5 lifecycle methods before the component is installed in the DOM:getDerivedStateFromProps
,shouldComponentUpdate
,render
,getSnapshotBeforeUpdate
withcomponentDidUpdate
.
getDerivedStateFromProps()
For this method, see the description above.
shouldComponentUpdate()
This method returns a Boolean value,true
orfalse
. You can use this method to tell React whether to continue re-rendering, and the default istrue
. You will come backfalse
The cost of re-rendering is high, and you want more control over when it happens.
Make ()
For this method, see the description above.
getSnapshotBeforeUpdate()
In this method, you can access the properties and status of the previous rendering as well as the current rendering.
Its use cases are very niche, and it may be the one you will use less.
componentDidUpdate()
This method will be called when the component has been updated in the DOM. Use it to run any third-party DOM API or call API that must be updated when the DOM changes.
It corresponds tocomponentDidMount()
The method starting from the installation phase.
Uninstalling
At this stage, we have only one way,componentWillUnmount
.
componentWillUnmount()
This method will be called when the component is removed from the DOM. Use this function to perform any type of cleanup you need to perform.
heritage
If you are using the following applicationcomponentWillMount
,componentWillReceiveProps
orcomponentWillUpdate
, Those are deprecated in React 16.3 and you should migrate to other lifecycle methods.
Download mine for freeResponse Handbook
More response tutorials:
- A simple React application example: Get GitHub user information through API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to child components through React Router
- Create an application using Electron and React
- Tutorial: Create a spreadsheet with React
- Roadmap for learning React
- Learn how to use Redux
- Getting started with JSX
- Stylized components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- Reaction component
- Virtual DOM
- Reaction event
- Reaction state
- Reaction props
- Reaction fragment
- React Context API
- Reaction PropTypes
- Reaction Concept: Declarative
- React: How to display other components when clicked
- How to loop inside React JSX
- Props and status in React
- Should you use jQuery or React?
- How much JavaScript do I need to know to use React?
- Gatsby Introduction
- How to reference DOM elements in React
- One-way data flow in React
- React high-end components
- React to life cycle events
- Reaction concept: immutability
- Reaction concept: purity
- Introduction to React hooks
- Introduction to create-react-app
- Reaction concept: composition
- React: demo component and container component
- Code splitting in React
- Server-side rendering with React
- How to install React
- CSS in React
- Use SASS in React
- Processing forms in React
- Reaction strict mode
- Reaction portal
- React rendering props
- Test React components
- How to pass parameters to event handlers in React
- How to deal with errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- Reaction, how to transfer props to subcomponents
- How to get the value of an input element in React
- How to use useState React hook
- How to use useCallback React hook
- How to use useEffect React hook
- How to use useMemo React hook
- How to use useRef React hook
- How to use useContext React hook
- How to use useReducer React hook
- How to connect your React app to the backend of the same source
- Reaching the router tutorial
- How to use React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix `dangerouslySetInnerHTML` does not match the error in React
- How can I solve the problem of React login form status and browser auto-fill
- How to configure HTTPS in React application on localhost
- How to fix the "Component cannot be updated while rendering other components" error in React
- Can I use React hooks within the conditions?
- Using useState with objects: how to update
- How to move in code blocks using React and Tailwind
- React, focus on an item in React when added to the DOM
- Response, edit text on doubleclick