[React] useState의 initialState를 값으로 넣어주는것과 함수의 반환값을 넣는 것의 차이

🤔 이것저것 예제 코드를 치다보니 문득 궁금해졌다. useState의 초깃값으로 값을 넣어주기도 하지만 함수를 넣어서 그 함수의 반환값을 초깃값으로 사용하기도 하는데 무슨 차이가 있는 걸까?
나는 함수 반환값을 넣어본적이 예제 코드 외에 자의적으로 한 적은 없긴 하지만 사용법을 알면 더 잘 사용하게 될지두....

게으른 초기화 | lazy initialization

initialState를 설정해줄때 원시값이 아니라 값을 반환해주는 함수를 넣는 것을 게으른 초기화(lazy initialization)이라고 한다

📘 공식 문서

❝
The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:

---

initialState 인수는 초기 렌더링 중에 사용되는 상태입니다. 후속 렌더링에서는 무시됩니다. 초기 상태가 비용이 많이 드는 계산의 결과인 경우 대신 초기 렌더링 시에만 실행되는 함수를 제공할 수 있습니다.
❞

예제 만들어서 확인해보기

1. useState를 두개 사용해주었다

   • value는 initialState를 값으로,
     lazy는 함수의 반환값으로 설정해주되 setState로 컴포넌트가 렌더링 됐을 때 어떻게 보이는 지를 알기 위해 콘솔에 메시지를 찍어주도록 해보았다.

2. 렌더 트리거가 일어나서 컴포넌트가 렌더링 될 때마다 콘솔에 메시지를 찍어주도록 해주었다.

결과 확인

실제로 initial state를 설정해주는 callback 함수는 최초 렌더 시에만 동작하고 이후 state의 변화로 인해 리렌더가 일어나도 재실행 되지 않음을 볼 수 있었음

---

👉 결론

동작 방법에 차이는 없었고 성능을 위해서 정말 무거운 작업을 통해 initial state가 설정될 때 사용하는 거 같다

😅 그리고 잠깐 했던 바보같은 생각.

useMemo로 복잡한 로직을 통해 도출되는 값을 관리하는데 useState의 lazy initialization을 이용해서 두면 되지 않을까?

응 안돼.

useState는 component의 render trigger를 일으키는 state를 관리하는 훅이다. 처음에만 지정해놓고 이후에 state의 변화가 없다면(그로 인해 렌더 트리거를 일으키지 않을거라면) 용도에 맞지 않다.
고로,
각자 훅은 제각기 용도가 있으니 맞게 잘 사용하자.