1 reply

React queuing state updates inside useEffect with strict mode

this isn't really practical but I have this code

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
     setCount((prev) => prev + 1);
       setCount((prev) => prev + 1);
  }, [ ])

  return (
   <p>count is {count}</p>
  )
}

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
     setCount((prev) => prev + 1);
       setCount((prev) => prev + 1);
  }, [ ])

  return (
   <p>count is {count}</p>
  )
}

when this runs with strict mode enabled it renders

count is 4

count is 4

.
The strict mode runs the useEffect twice but because we are using updater function format for state it will pass the latest state value.
so we are getting 4 instead of 2.

my question is does this mean using updater function in useEffect is bad? I have not had a need to use updater functions so I am not sure if this is how it should be.

KP-C

Kevin Powell - Community•6mo ago•

1 reply

Ganesh

React queuing state updates inside useEffect with strict mode

this isn't really practical but I have this code

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
     setCount((prev) => prev + 1);
       setCount((prev) => prev + 1);
  }, [ ])

  return (
   <p>count is {count}</p>
  )
}

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
     setCount((prev) => prev + 1);
       setCount((prev) => prev + 1);
  }, [ ])

  return (
   <p>count is {count}</p>
  )
}

when this runs with strict mode enabled it renders

count is 4

count is 4

React queuing state updates inside useEffect with strict mode

Similar Threads

React queuing state updates inside useEffect with strict mode

Similar Threads

Similar Threads

Similar Threads