React class life cycle methods to useEffect
Tags: react, webdev, beginners, javascript
Published: 2021-11-16 00:34:22

## How to map a React class life cycle methods/hooks to useEffect


### Common class lifecycle methods

```jsx
// happens as soon as your component is mounted
componentDidMount() {}

// happens as soon as the updating begin
componentDidUpdate(prevProps, prevState, snapshot) {}

// for certain performance optimizations
shouldComponentUpdate(nextProps, nextState) {}

// happens just before the component unmounts
componentWillUnmount() {}
}
```

<br />

## How can we map those lifecycle hooks to useEffect?

Here are basic templates to convert a class lifecycle method to a useEffect hook:

<br />

### componentDidMount

Create an empty dependency array and pass it to the `useEffect` hook.

```jsx
useEffect(() => {
  // code to run when the component is mounted 

  // Make sure this is empty to ensure the hook will only run once
}, [])
```
[Link to Codepen](https://codepen.io/codegino/pen/qBXKWxx)

<br />

### shouldComponentUpdate

Add the dependency array and pass it to the `useEffect` hook.

```jsx
// props: {name}
// state: {visible}

useEffect(() => {
  // ... code to run

  // the dependency array below is "equivalent" to:
  // the effect will trigger if
  // props.name !== nextProps.name || state.enabled !== nextState.enabled
}, [name, visible]) 
```
[Link to Codepen](https://codepen.io/codegino/pen/gOxKObO)

<br />

### componentWillUnmount

A `useEffect` can return a function whose body will be executed when the component is unmounted.

```jsx
useEffect(() => {
  return () => {
    // code to run when the component is unmounted
  }
}, /* with or without dependency array */)
```
[Link to Codepen](https://codepen.io/codegino/pen/vYJrBKr)

<br />

### componentDidUpdate

This is a bit subjective because it's up to the developer to decide how `componentDidUpdate` should behave (the simplest is the same as `componentDidMount` mapping).
It could also be a combination of `componentDidMount` and `shouldComponentUpdate` mapping with the addition of a reference variable to check if the component has been mounted as shown below:

```jsx
const hasMount = useRef(false)

useEffect(() => {
  if (hasMount.current) {
    // code to run when the component is updated
  } else {
    hasMount.current = true
  }
}, /* dependencies */)`
```
[Link to Codepen](https://codepen.io/codegino/pen/qBXKBeB)

<br />

## Additional Note
- You can only define one of each lifecycle method in a `class` component.
When using hooks, you can define as many `useEffect` as you want.
- You can only use `useEffect` in a `function` component

<br />

## Conclusion
The examples above are simple ways to map a `class lifecycle hooks` component to a `React hooks`, and there are many other ways to do it. The good news is that you don't need to think of mapping lifecycle hooks to useEffect since React hooks introduced a different paradigm on how we can create a React component and how we can manage side-effects. This mapping is only useful when I'm refactoring a `class` component to be a `function` component. For newer projects, I ought to think that the class component does not exist.

### If you find this useful and you want to support me

<a href="https://www.buymeacoffee.com/codegino" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="37" width="174"></a>