React useState 초기값 함수로 할당시 최적화

패스트캠퍼스에서 최적화 강의를 듣는 도중에, useState에 초기값을 할당할 때 최적화 하는 방법에 대해서 배우게 되었다.

 

관련 코드는 아래와 같다.

const [termsAgreements, setTermsAgreements] = useState(() => {
    return 약관목록.reduce<Record<string, boolean>>(
      (prev, term) => ({
        ...prev,
        [term.id]: false,
      }),
      {},
    )

 

약관목록에서 키는 문자 타입의 term의 id값이고, value는 초기값 false인 것들을 termsAgreement의 초기값으로 할당할 것이다.

 

이때, 이미 만들어진 약관목록 상수값에서 해당 키값을 가져오지만, 이는 최초 렌더링시에 한 번만 실행되면 된다. 

const [termsAgreements, setTermsAgreements] = useState(
        약관목록.reduce<Record<string, boolean>>(
      (prev, term) => ({
        ...prev,
        [term.id]: false,
      }),
      {},
    )

 

하지만 아래와 같이 할당을 경우 useState가  초기값은 한번의 실행에서만 할당하지만, 매 랜더링마다 reduce함수가 실행되고, 이건 불필요한 성능 저하를 일으킨다.

 

따라서 이를 콜백함수 형태로 할당할 경우에 성능을 최적화 할 수 있다.

 

첫 번째 방식으로 할 경우에 최적화가 되는 이유는 리액트가 해당 함수의 결과값이 같은지를 확인하는게 아니라, 해당 함수가 같은지를 확인하기 때문이다.

 

https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state

useState – React