React component lifecycle: React lifecycle & hooks
- Tram Ho
The lifecycle of React components and its methods is an essential part of developing applications in React. Although this method is increasingly being superseded by React Hooks these days, you should take a closer look at how it works, study the relationship between class components and functions, and gain a deeper understanding of DOM manipulation. with React. Let’s practice class-based methods and see how well they fit in the appearance of useEffect.
Ever since the birth of React, back in 2013, React developers have used component classes to use the entire React library (extend from React.Component) to manipulate the DOM during the development of a based application. on React. How it works?
React lifecycle methods:
First, let’s see how it’s done the traditional way. As you probably know, every React component has a life cycle, which consists of three phases:
- Mounting, this is the phase of putting elements into the DOM
- Updating, this is the phase of updating components in the DOM
- Unmounting, this is the phase of removing components from the DOM
Each phase has its own methods, which make it easier to perform typical operations on components. With class-based components, React developers directly extend from React.Component to access methods.
There is no need to deal with all the lifecycle methods of a React component here. The best source of information about currently supported methods for class components is the official React documentation. Instead, let’s take a closer look at a few examples of lifecycle methods. Before you do, however, tackle the topic that you can think of right now.
Class components vs functional components
As you may know, an alternative way to take advantage of lifecycle methods is to use hooks. With the release of React 16.8 in March 2019, it is now possible to create function components not stateless and can use lifecycle methods.
This is all thanks to the useState and useEffect hooks – special functions combined with React features that allow setting state and using lifecycle events in function components. It is now possible to emulate the performance of almost any supported lifecycle method by cleverly applying these two hooks in your pure JavaScript functions.
Are advanced functional component hooks superior to class components? Before we get there, let’s look at the lifecycle stages using a traditional approach.
Mounting in React component lifecycle
As we mentioned, during the mounting phase of the lifecycle, class components are inserted into the DOM. A good example is componentDidMount() – a lifecycle method that runs after components are mouting and rendered to the DOM. It’s great when you want to make an interval function or an asynchronous request. Eg:
1 2 3 4 5 6 7 | componentDidMount() { fetch(url).then(res => { // Handle response in the way you want. // Most often with editing state values. }) } |
Updating in React component lifecycle
The componentDidUpdate() method is called immediately after the update occurs. This is called always except the first render. You should make http requests here.
You can call setState() in this method but it is very important to wrap it in some condition to avoid infinite loop (doesn’t matter if the state has the same value or not). If there are no conditions, the process goes like this:
- You call setState() in method componentDidUpdate ().
- Components are updated
- componentDidUpdate () called.
- setState is called again.
1 2 3 4 5 6 7 | componentDidUpdate(prevProps, prevState) { // Always compare props or state if (this.props.counter !== prevProps.counter) { this.postCounter(this.props.counter); } } |
Unmounting in React component lifecycle
componentWillUnmount () is called just before the component is removed from the DOM. You should use that to remove event listeners, clear interval and cancel requests. In other words: all the things that need cleaning up.
1 2 3 4 | componentWillUnmount() { document.removeEventListener("click", this.someFunction); } |
You should not use setState in that method because the component will no longer be rendered.
React components lifecycle with hooks
You can take advantage of hook useEffect to achieve the same result as with method componentDidMount, componentDidUpdate và componentWillUnmount. useEffect accepts two parameters. The first one is callback run after render, same as in componentDidMount. The second parameter is a dependency. If you just want to run it on mount and stop, pass an empty array [].
To clean up, use the return function in useEffect:
1 2 3 4 5 6 7 8 9 10 11 | useEffect( () => { document.addEventListener(“click”, someFunc); return () => { document.removeEventListener(“click”, someFunc); }; }, [] ); |
If you want it to behave like componentDidUpdate, put some dependencies in the array or don’t pass the second argument.
You can also use useState instead of this.state in class components. Instead of:
1 2 3 4 5 | this.state = { counter: 0, usersList: [], } |
We can write as:
1 2 3 | const [counter, setCounter] = useState(0); const [usersList, setUsersList] = useState([]); |
Class components vs hooks, which one is better?
Is this choice mainly a matter of personal preference? If you are familiar with functional programming, you will definitely enjoy using hooks. Developers can use functional components without having to convert them into class components.
Despite the fact that hooks are really popular these days, there’s nothing wrong with using class components. Everything you can do with hooks can also be done with class components. Class components are deprecated, so use them if that style suits you better. It’s all about different ways of organizing code and choosing something more intuitive for you and your team.
You can learn more and more thoroughly at React.js
References: