Understanding useEffect() behaviour and extra re-renders

user_2170368 0
Viewed 97

I was doing some tests with the following dummy component, where upon the execution (in the console) I am getting the following result:

Rendering:  0
Triggered:  0
Rendering:  4
Triggered:  4
Rendering:  4

I struggle to understand why.

First rendering:

  • sets index to 0.
  • runs useEffect as undefined is not 0
  • useEffect requests setting index to 4

Second render:

  • index is 4
  • why useEffect body is executed again?

Third render:

  • why there is re-rendering?

What I would expect is:

Rendering:  0
Triggered:  0
Rendering:  4

Am I skipping something very obvious? Could you please help me understand how this works under the hood?

const Example = React.memo(() => {
    const [index, setIndex] = React.useState(0)
    console.log('Rendering: ', index)

    React.useEffect(() => {
        console.log('Triggered: ', index)
        setIndex(4)
    }, [index])

    return <h1>{index}</h1>
})

ReactDOM.render(<Example />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

react-hooks reactjs javascript
3 Answers

The number of rerenders are actually correct. Let's analyze what happens:

  1. Rendering 0 - this is on mount first render (in this state, every useEffect is run automatically)
  1. Triggered 0 - this is initial triggering of useEffect
  1. Rendering 4 - this rerender is because you set new state of index to 4
  1. Triggered 4 - this is triggered because you changed index from 0 to 4
  1. Rendering 4 - this is run because state is changed from 4 to 4 (even the value is the same, it will trigger component rerender because React does not know if you set same state, and it needs to run again). In this rerender useEffect is not run because index is 4 again.

Rationale

If anything changes in a component at any point like useState useContext, customHook, that component will need to rerender. This also happens if the parent component rerenders, child component will rerender even if your component did not have any changes.

Additional rerendering tips and info

To prevent parent unnecessary rerendering of child components from happening you can use React.memo, this will rerender your component if props change, but wont prevent your component from rerendering if state or any of the above hooks change in there.

If this seems redundant, it sounds like it, but it is necessary so that react is sure it has the latest state. Running JS like this is faster than having some state memory that checks changes and also it is more transparent for the developer (and just how the VDOM is created)

user_39555570

Expected output can't be achieved.

useEffect renders on when component mount and on every re-render when state changes(index).

const Example = () => {
    const [index, setIndex] = React.useState(0)
    console.log('Rendering: ', index)
    React.useEffect(() => {
        console.log('Triggered: ', index)
        setIndex(4)
    }, [index])

    return <h1>{index}</h1>
}

Output:

  • Rendering: 0 => When component mount first time, that time index is 0
  • Triggered: 0 => On mount useEffect triggers, and state updated(0 to 4)
  • Rendering: 4 => Componet re-rendered because state has changed from (0 to 4)
  • Triggered: 4 => useEffect re-triggered because state has changed(0 to 4)
  • Rendering: 4 => Componet re-rendered because to check whether state has changed or not (4 to 4, kind of confirmation nothing changed )
user_88795270

The way useEffect work is it only runs after page component is rendered.

Hope this will help you to understand.

1st render index is 0.

Rendering:  0

It triggers the useEffect.

Triggered:  0

Index is updated in the useEffect but not in the component. Then render updates the index to 4.

Rendering:  4

The useEffect runs because index has changed.

Triggered:  4

The component is rendered again but index is still 4 so the useEffect wont run again.

Rendering:  4
user_37672850
Related