uinaf/agent-skills

React useEffect 금지

직접적인 useEffect는 외부 동기화 탈출구(escape hatch)입니다. 이는 검토된 도메인별 훅에 존재해야 하며, 실제 외부 시스템을 위한 것이어야 하고, 컴포넌트는 effect 없이 유지됩니다.

범위

Effect 대체는 영향을 받는 동작을 변경합니다. 저장소 전체의 린트 강제 적용은 별도의 작업입니다. 요청되거나 기존 저장소 정책에 필요한 경우에만 적용하세요. 검토 요청은 결과를 생성하고, 구현 요청은 추가 승인 없이 범위 내 대체 및 검증을 허용합니다.

작업 흐름

1. 영향을 받는 표면에서 직접 가져오기, React.useEffect(...) 네임스페이스 호출 및 useEffect 래퍼를 찾습니다.

2. 각 effect를 분류하고 다음 우선순위로 대체합니다:

   1. 렌더 타임 계산
   2. 서버, 로더 또는 프레임워크 데이터 API
   3. 저장소의 서버 상태 레이어 (예: 키에 변수가 있고 signal이 전달되는 TanStack Query queryOptions 팩토리)
   4. 이벤트 핸들러, 액션 또는 뮤테이션
   5. 키가 있는 컴포넌트 경계
   6. useSyncExternalStore
   7. 실제 외부 시스템을 위한 검토된 도메인별 훅

   어느 것도 해당되지 않으면 effect를 유지하기 전에 외부 동기화 계약을 명시하세요. 대체에서 명확하지 않은 경우를 다룹니다.

3. 저장소의 프레임워크, 데이터 레이어, 린트 형태 및 의존성 정책을 유지합니다. 요청이나 저장소 정책에서 승인한 경우에만 라이브러리를 추가합니다. 서버 상태 레이어가 없으면 남은 effect를 설계 결함으로 간주합니다.

4. 린트, 타입, 테스트 게이트와 변경된 동작에 대한 가장 작은 실제 UI 또는 훅 검사를 실행합니다.

합법적 Effect

모든 합법적 effect는 해당 외부 시스템(채팅 연결, 맵 SDK, 위젯)의 이름을 딴 훅에, 자체 파일에 넣습니다. 훅은 설정 및 정리를 담당하고, 반응형 입력을 매개변수로 받으며, 설정 또는 정리가 읽는 모든 값을 나열하여 react-hooks/exhaustive-deps가 억제 없이 통과하도록 합니다. 기존 저장소 훅을 선호합니다.

훅은 하나의 외부 시스템에 특화됩니다. 콜백과 호출자 제공 의존성 배열을 받는 일반 래퍼(useUpdateEffect(fn, deps), useMountEffect(fn))는 다른 이름의 직접적인 effect이며, 서버 상태, 속성 복사, 사용자 액션 및 키가 있는 리셋은 각각 위의 대체 방법이 있습니다.

강제 적용

강제 적용이 범위 내에 있을 때, 저장소의 기존 린터를 확장하여 명명된 useEffect 가져오기와 React.useEffect(...) 호출을 모두 거부합니다. src/hooks/**와 같은 디렉터리가 아닌 명명된 검토된 통합 훅 파일만 허용합니다. 일반 래퍼와 해당 호출자를 위반 사항으로 보고하여 마이그레이션하도록 합니다. 표준 로컬 게이트와 CI에서 동일한 린트 표면을 실행하고, 고정된 도구 버전을 사용합니다.

검토에서, 모든 새로운 직접적인 effect는 변경 사항이 합법적인 외부 시스템 경계를 문서화하고 증명하지 않는 한 발견 항목입니다. 의존성 배열 조정이 아닌 대체를 요청하세요.

경계

• 마이그레이션 범위를 영향을 받거나 요청된 표면으로 제한합니다.
• useLayoutEffect, useInsertionEffect, 프레임워크 수명 주기 API 및 비React effect 시스템(린트 규칙 포함)은 요청되지 않는 한 그대로 둡니다.
• 측정된 동작이나 확립된 저장소 패턴에 대해서만 성능 프리미티브를 적용합니다.
• 업스트림 속성: 업스트림.