Hook 상태 소유자와 의존성 배열 설계

상태 소유자 선택

한 컴포넌트만 쓰는 값은 local, 여러 화면이 공유하면 외부 store나 URL로 옮긴다.

owner

props와 state로 계산 가능한 값은 별도 state로 저장하지 않는다.

derived

DOM, 네트워크, 구독처럼 React 바깥 시스템과 동기화할 때 effect를 쓴다.

external sync

상태와 effect 조합이 재사용되면 입력과 반환 계약을 명명한다.

reuse

useState

단순한 로컬 변경에는 가장 직접적이다. 초기값이 비싸면 lazy initializer를 사용한다.

simple state

useReducer

상태 전이가 여러 이벤트와 규칙을 가지면 reducer로 모은다. action union이 전이 가능한 이벤트를 문서화한다.

state machine

useEffect

렌더 결과를 외부 시스템에 반영하는 목적일 때만 쓴다. 계산을 위해 effect와 setState를 반복하면 흐름이 복잡해진다.

avoid derived effect

의존성 effect 내부에서 읽는 값이 dependency array에 반영된다.

정리 함수 구독, 타이머, 요청 취소가 cleanup으로 이어진다.

무한 루프 effect가 매 렌더마다 새 객체 의존성 때문에 반복되지 않는다.

type Action =
  | { type: "start" }
  | { type: "success"; data: User[] }
  | { type: "fail"; message: string };