useState의 지연 초기화

오늘도 리액트의 렌더링 문제를 풀다가 지연 초기화에 대해서 알게 되었다.
정리하기 위해서 또 블로그 글을 남긴다

문제는 이렇다

import * as React from 'react'
import { useState, useEffect } from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  const [state1, setState1] = useState(1);

  const [state2] = useState(() => {
    console.log(2);
    return 2;
  });

  console.log(state1);

  useEffect(() => {
    setState1(3);
  }, []);

  return null;
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

내가 생각한 정답

2
1
2
3

"리렌더링이 되면 함수 컴포넌트 내부의 코드가 위에서 아래로 다시 싹 실행된다"는 점 때문에 순서대로 실행될것이다 라고 예상했다.

setState 훅스에서 함수로 값을 전달해 주기 때문에 함수가 새로 참조되어서 다시 작동 될줄 예상했다.

하지만 지연 초기화라고 해서 다시 작동되지 않았다.. 이번 기회로 지연 초기화에 대해서 알게 되어서 정리한다.

지연 초기화란 ?

useState의 초기값으로 숫자나 문자열 같은 '값' 대신, '값을 반환하는 함수'를 전달하는 기법

// 1. 일반적인 방식 (값 전달) 
const [state, setState] = useState(getHeavyData()); 
// 2. 지연 초기화 방식 (함수 전달) 
const [state, setState] = useState(() => getHeavyData());

왜 이를 사용하는 것일까 ?

• 일반적인 방식: 리렌더링될 때마다 getHeavyData() 함수가 매번 실행된다. 리액트가 내부적으로 "어? 이미 초기값은 있으니까 이건 무시해야지"라고 판단하더라도, 이미 함수 자체가 호출되어 연산이 끝난 뒤, 만약 이 함수가 엄청나게 복잡한 계산을 하거나 로컬 스토리지에서 데이터를 읽어온다면 성능 낭비가 심하게될것이다.

즉, 리 렌더링 될때마다 함수가 매번 실행된다는점

• 지연 초기화 방식: 리액트는 전달된 함수를 최초 마운트 시 딱 한 번만 실행! 그 이후 리렌더링 때는 이 함수를 쳐다보지도 않는다.

그냥 일반적으로 useState에 함수로 계산된 값을 사용했었는데 이게 지연 초기화 방식 이라는 용어가 있었다는 점에서 새롭게 알게 되었다.

그리고 일반적인 방식과 지연 초기화 방식에서 성능 차이가 날수 있다는 점에 대해서 알게 되었다.