useState에 동일한 State를 Update할 경우 어떻게 될까?

1. 예시 코드

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  console.log("컴포넌트 리렌더링");
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const setSameCount = () => {
    setCount(count);
  };

  // 컴포넌트가 처음으로 렌더링 될 때 동작
  useEffect(() => {
    console.log("component mount");
  }, []);

  // count가 변경될 때 동작
  useEffect(() => {
    console.log("count 변경 감지");
  }, [count]);

  return (
    <div>
      {count}
      <button onClick={increment}>increment</button>
      <button onClick={setSameCount}>setSameCount</button>
    </div>
  );
}

export default App;

2. 결과

• increment 버튼을 이용해 count를 계속 증가시킬 경우
  • App 컴포넌트 리렌더링 및 count가 참조된 useEffect 실행
• setSameCount 버튼을 이용해 같은 값을 업데이트 할 경우
  • 첫번째 클릭
    • 컴포넌트 자체는 리렌더링 1번 발생
    • count가 참조된 useEffect는 count가 변경되지 않았다고 판단하기 때문에 실행되지 않음
  • 두번째 클릭
    • 컴포넌트 리렌더링이 발생하지 않음

3. 분석

• setSameCount 버튼을 이용해 같은 값을 업데이트 할 경우 리렌더링이 1회 발생하는 이유는?
  • 공식문서: state를 업데이트하는 함수가 동일한 값을 반환하는 경우 그 다음부터 리렌더링을 건너뛴다고 나와있습니다.
  • 즉 state Hook을 현재 상태와 같은 값으로 업데이트하면 그 후에 React는 리렌더링을 발생시키지 않는다고 합니다!

If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely.

4. 참고

• https://reactjs.org/docs/hooks-reference.html?fbclid=IwAR3rAXffa8s5dx1DSJgf_KNnvm9Roz39goXCinDpD3QJ1zl76OeKds7pMTs#bailing-out-of-a-dispatch