안녕하세요 Hook에서 렌더링 질문있습니다.

hook에서 다음과 같은 코드로 렌더링을 몇번 발생하는지 확인해 보았습니다.

첫번째 코드

function App () {
  const [one, setOne] = useState(0);
  const [two, setTwo] = useState(0);
  
  useEffect(()=>{
    setOne(prev => prev + 1);
    setTwo(prev => prev + 1);
  }, []);

  console.log('렌더링!');
  
  return (
    <>
      {one}{two}
    </>
  );
}

두번째 코드

function App () {
  const [one, setOne] = useState(0);
  const [two, setTwo] = useState(0);
  
  useEffect(()=>{
    setTimeout(()=>{
      setOne(prev => prev + 1);
      setTwo(prev => prev + 1);
    }, 1000);
  }, []);

  console.log('렌더링!');
  
  return (
    <>
      {one}{two}
    </>
  );

브라우저 콘솔을 확인한 결과, 첫번째 코드는 렌더링이 2번, 두번째 코드는 렌더링이 3번 발생했습니다.

초기 렌더링을 제외하면,

첫번째 코드에서는 react가 setOne과 setTwo를 한번에 처리해줘서 추가적으로 렌더링이 1번 발생한 것 같고,

두번째 코드에서는 react가 setOne과 setTwo를 각각 따로 한번씩 처리해줘서 렌더링이 2번 발생한 것 같은데...

첫번째와 두번째 각각 왜 이러한 현상이 발생하는 건지 궁금합니다..ㅠㅠ