Question

0

197

Views

Why is useEffect executed only once when multiple states in the useEffect dependency array change at once?

  <div
    onClick={() => {
      setTest1((x: number) => x + 1);
      setTest2((x: number) => x + 3); 
    }}
  >
    one? two?
  </div>

  const [test1, setTest1] = useState(1);
  const [test2, setTest2] = useState(1);
  useEffect(() => {
    console.log('!@#$');
    console.log(test1, test2);
  }, [test1, test2]);

Test1 and test2 changed at the same time through onClick, but '!@#$' is printed only once on the console, so even if multiple states change, useEffect seems to be executed only once. I wonder why it is executed only once.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T04:39:09.427Z

state updates are batched in react for performance. So both of these setStates cause only one rerender. And after that one rerender, useEffect callback is called.

0

197

Why is useEffect executed only once when multiple states in the useEffect dependency array change at once?

1 answers

0

Find remote jobs

Andres GPT