Understanding useEffect() behaviour and extra re-renders

Question

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>

Answer 1

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)

---

2. Triggered 0 - this is initial triggering of useEffect

---

3. Rendering 4 - this rerender is because you set new state of index to 4

---

4. Triggered 4 - this is triggered because you changed index from 0 to 4

---

5. 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)

Answer 2

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 )