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>
  )
}

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

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.

React queuing state updates inside useEffect with strict mode

Similar Threads

Similar Threads

Similar Threads