useState의 초기값으로 복잡한 계산이나 시간이 오래 걸리는 작업이 있다면, 이를 함수로 감싸서 전달할 수 있다. 이 경우, React는 첫 번째 렌더링에서만 이 함수를 호출하여 초기 상태를 계산하고, 이후에는 해당 함수가 호출되지 않는다.
const [value, setValue] = useState(() => {
// 복잡한 초기 상태 계산
return expensiveComputation(); });기본값(초기 상태)은 오직 컴포넌트가 처음 렌더링될 때만 설정되며, 이후의 렌더링에서는 상태가 유지된다. 상태가 변경될 때마다 기본값을 다시 설정하면 예상치 못한 동작이나 불필요한 재렌더링이 발생할 수 있기 때문에, React는 초기값을 재렌더링 시에는 다시 설정하지 않도록 설계되었다.
콜백 함수 없이 상태를 초기화하면 매번 평가는 이루어지지만, 실제로 그 값이 상태로 사용되는 것은 첫 번째 렌더링 시 뿐이다. 반면 콜백을 사용하면 첫 렌더링 이후 아예 평가 자체를 건너뛰기 때문에 성능 최적화가 가능한 것이다.
