• 목록
• 게시판 리스트 옵션
  • 검색

✅ useState 초기값에 함수 안 쓰면 매 렌더마다 계산된다

무거운 연산은 꼭 지연 평가로 감싸라

useState의 초기값에 연산이 들어가면
컴포넌트가 리렌더링될 때마다 실행된다:

const [data] = useState(expensiveCompute()); // ❌ 렌더마다 계산됨

✅ 해결: 함수로 감싸서 지연 평가하기

const [data] = useState(() => expensiveCompute()); // ✅ 최초 한 번만 실행

• useState(() => ...)는 초기 렌더에서만 실행

• 이후에는 무시됨

• 초기 데이터가 클수록 렌더링 성능에 큰 차이 발생

✔️ 리소스 많이 쓰는 계산이라면
무조건 함수로 감싸서 초기화하라.
이건 고수의 기본 습관이다.