What is the react strict mode control flow

Question

What will be the output of the following component under react strict-mode?

import { useEffect } from "react"; export default function Learn() { let x = 1; console.log("outside ", x) useEffect(() => { console.log(x); x = 2; return () => console.log("destruct", x) }, []); console.log("end of fn ", x) return ( <> <p>value = {x}</p> </> ); }

I ran it on my machine and I got

outside 1 end of fn 1 outside 1 end of fn 1 1 destruct 2 2

But I can't understand why. As per my reasoning, it should've been

outside 1 end of fn 1 1 destruct 2 outside 1 end of fn 1 1

What I assumed (incorrectly) was that react strict mode will:

Start adding the component to Virtual DOM.
Once mounting is done, it'll call the useState hook.
repeats (1) and (2) again.

But that is not happening here. So what is happening here?

I think it could be due to stale closure but I'm unsure. Is react reusing the same function inside useEffect (instead of making a new one, since dependency array is empty), and since its scope contains x=2, it'll be shown? — Robin Roy
– Robin Roy, Commented Nov 8, 2024 at 15:23

Cristian-Alexandru SANDU · Accepted Answer · 2024-11-08 22:05:49Z

React strict mode, in development, forces a double render. useEffect hook is not immediately called, it is scheduled to run after the component has been mounted. So during the first render the output will be

outside 1 end of fn 1

after this, react imedtiately rerenders the component so the logs will reapper. Second render outputs:

outside 1 end of fn 1

and then we get the useEffect logs

1 destruct 2 2

Now to the part where x is not reinitialised. use effect cleanup is called when the use effect hook is called again. In the cleanup the value of x is not changed so it will remain the same. So, useEffect is ran x is outputed (1) then x++ then react callse the use effect hook again, meaning it will call the cleanup function so 'desturct 2' and then print the x again (2) then x++. It is explained a little bit better here: Why is the cleanup function from `useEffect` called on every render?

Collectives™ on Stack Overflow

What is the react strict mode control flow

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related