01 이전 값 의존 여부
카운터 증가처럼 직전 state가 필요하면
setCount(prev => prev + 1) 형태를 고릅니다.
useState 판단 지도
다음 상태 계산 기준
setter에 값을 바로 넣을지, 함수를 넣을지, 새 객체를 만들지, 초기값 계산을 지연할지는 state가 어디에 의존하는지에 따라 결정됩니다.
상태 업데이트 선택 순서
prev → copy → lazy init02 객체·배열 상태 여부
기존 참조를 수정하지 않고 spread, map, filter로 새 참조를 만들어 전달합니다.
03 초기 계산 비용
로컬 스토리지 읽기나 무거운 계산은
useState(() => init())로 첫 렌더에만 실행합니다.
다음 상태 계산 점검직접 변경 금지
user.name = value처럼 같은 객체를 바꾸면 변경
감지가 누락될 수 있습니다.
연속 클릭, 배치 업데이트, 비동기 이벤트처럼 최신 이전 값이 중요할 때 사용합니다.
객체와 배열은 새 참조가 생겨야 React가 변경을 감지하고 다시 렌더링합니다.
초기값 계산은 첫 렌더에만 필요하므로 함수로 넘겨 반복 비용을 피합니다.
다음 state가 이전 state에서 나오면 함수형 업데이트를, 객체/배열이면 새 참조 생성을, 초기값 계산이 무거우면 지연 초기화를 먼저 떠올리면 대부분의 useState 실수를 줄일 수 있습니다.