Bump eslint-plugin-react-hooks to 7.0.0 and fix all react compiler lint errors #561
Conversation
dependabot
bot
added
dependencies
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the WalkthroughReact Hooks ESLint 플러그인과 구성 업데이트를 적용하고, 여러 컴포넌트/페이지에서 드래그 앤 드롭 재정렬 흐름을 임시 순서 상태와 useMemo 기반 파생 데이터로 재구성했다. 일부 효과 등록을 useEffect로 이동했으며, 알림/프로필 설정 화면의 내부 데이터 흐름과 상태 초기화 방식을 리팩터링했다. 여럿 파일에 린트 억제 주석이 추가되었다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as User
participant UI as Component (List with DnD)
participant Temp as Temp Order State
participant API as Reorder Mutation
participant QC as QueryClient
User->>UI: Drag item A over item B
UI->>Temp: moveTask/moveProject (reorder in-memory)
Note right of Temp: display* = tempOrder || derived
User->>UI: Drop
UI->>UI: Compute changed* from display*
alt has changes
UI->>API: PATCH reorder(changed*)
API-->>UI: success
UI->>QC: invalidate related query
UI->>Temp: reset tempOrder
else no changes
UI->>Temp: reset tempOrder
end
rect rgb(245,248,255)
Note over UI,Temp: Error path
API-->>UI: error
UI->>UI: show toast(error)
UI->>Temp: reset tempOrder
end
sequenceDiagram
autonumber
actor User as User
participant Notif as Settings/Notifications
participant SW as Service Worker
participant Srv as Server
participant QC as QueryClient
User->>Notif: Toggle Push ON
Notif->>SW: subscribePush(urlB64ToUint8Array)
SW-->>Notif: PushSubscription
Notif->>Srv: Register subscription
Srv-->>Notif: 200 OK
Notif->>QC: invalidate(subscriptions/excluded_types)
Note over Notif: Toast on success/error
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Comment |
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/frontend/eslint-plugin-react-hooks-6.1.1
branch
from
e82faa9 to
b55a0fd
Compare
Bumps [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/HEAD/packages/eslint-plugin-react-hooks) from 5.2.0 to 6.1.1. - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md) - [Commits](https://github.com/facebook/react/commits/HEAD/packages/eslint-plugin-react-hooks) --- updated-dependencies: - dependency-name: eslint-plugin-react-hooks dependency-version: 6.1.1 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]>
dependabot
bot
force-pushed
the
dependabot/npm_and_yarn/frontend/eslint-plugin-react-hooks-6.1.1
branch
from
b55a0fd to
abb5e31
Compare
JedBeom
changed the title
|
The following lint rules were added: |
- remove useEffect
JedBeom
changed the title
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
변경사항
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (9)
frontend/src/components/social/reactions/AnimatedCount.tsx (1)
27-28: eslint-disable 주석 사용이 적절하지만 패턴 재검토를 권장합니다.
react-hooks/set-state-in-effect규칙을 비활성화한 것은 이 컨텍스트에서 적절합니다. effect 내에서setDir호출이 의도적이며count/prev변경에 대한 응답으로 방향 상태를 설정합니다.그러나 effect 내 setState는 React Compiler의 새 규칙에서 플래그되는 패턴입니다. 향후 리팩터링 시 다음을 고려하세요:
count와prev의 차이에서dir를 직접 파생시키는 방법- 또는 타이머 완료 시에만 상태를 업데이트하는 구조
현재 구현은 동작하며 명시적으로 문서화되어 있으므로 승인합니다.
frontend/src/components/tasks/TaskNameInput.tsx (1)
49-50: 비활성화 주석에 의도 문구 추가 제안Line 49에서 ESLint 억제 사유를 함께 적어 두면 후속 유지보수자가 맥락을 즉시 파악할 수 있습니다.
- // eslint-disable-next-line react-hooks/set-state-in-effect + // eslint-disable-next-line react-hooks/set-state-in-effect -- 상위 Task 갱신 시 로딩 상태 초기화frontend/src/components/drawers/DrawerBlock.tsx (3)
145-150: 임시 정렬 상태 관리 접근 OKtempTaskOrder와 displayTasks로 파생 리스트를 분리한 구조가 명확합니다.
정렬 기준(ordering) 또는 데이터 페이지가 바뀔 때도 잔여 tempTaskOrder가 남지 않도록, ordering이나 data 변경 시 tempTaskOrder를 비우는 효과를 추가하는 것을 고려해 주세요.
157-167: 인덱스 vs order 혼용 가능성현재 moveTask는 배열 인덱스를 기대하지만, DrawerTask 쪽에서 전달되는 값이 Task.order(서버 상태 기반)라면 다중 hover/이동 시 인덱스와 order가 어긋날 수 있습니다. hover 단계에서 기준으로 사용할 값은 “현재 렌더 배열의 인덱스”가 더 안전합니다.
아래 렌더 구간에서 DrawerTask에 index를 넘기고, DrawerTask가 해당 index를 기준으로 dragIndex/hoverIndex를 계산하도록 바꾸면 안정성이 좋아집니다. 적용 예시는 하단 렌더 코멘트에 diff로 제안합니다.
276-285: DrawerTask에 index/canReorder를 전달해 드래그 안정화현재 task.order 의존 대신, 렌더 인덱스를 전달해 드래그/호버 인덱스를 일관되게 유지하세요. 또한 order 정렬일 때만 드래그 가능하도록 게이트를 추가하세요.
위의 diff를 적용하면 moveTask 시 인덱스 불일치 가능성을 줄이고, 정렬 기준에 따른 오작동을 방지할 수 있습니다.
frontend/src/pages/settings/Notifications.tsx (1)
158-167: 초기 선택값 파생 로직의 동기화 제안selectedItems를 items/query/setting에서 초기화만 하고 이후 쿼리 갱신과 동기화하지 않습니다. 최초 페치 완료 시점에 초기 선택값이 뒤늦게 반영되길 원한다면 sync 효과를 추가하세요(사용자 편집이 시작되기 전까지만 동기화).
예: query.isSuccess && !사용자편집중 일 때 setSelectedItems(...) 재계산.
frontend/src/components/tasks/DrawerTask.tsx (1)
94-97: 정렬 기준 게이트와 인덱스 기반 드래그로 보강 제안현재는 항상 drag(drop(ref))를 바인딩합니다. 부모에서 canReorder를 전달받아 정렬 기준이 'order'일 때만 바인딩하고, 드래그/호버 인덱스는 렌더 인덱스를 사용하면 안정적입니다.
예시:
- props 추가: index: number, canReorder?: boolean
- useDrop.canDrop: canReorder && !isPending && 동일 drawer
- useDrag.canDrag: canReorder && !isPending
- hover: const dragIndex = item.index; const hoverIndex = index; ... moveTask(dragIndex, hoverIndex); item.index = hoverIndex;
- effect deps: [drag, drop, canReorder]
추가 구현 예시는 상위 파일 코멘트의 diff를 참고해 주세요.
frontend/src/components/drawers/InboxDrawer.tsx (2)
71-79: 인덱스 기반으로 move 처리 권장displayTasks를 기준으로 스플라이스하므로, DrawerTask에서 현재 렌더 인덱스를 전달받아 사용하는 편이 안전합니다(주문 값과 인덱스 분리).
아래 렌더 코멘트에 index 전달 예시를 첨부했습니다.
125-133: DrawerTask에 index/canReorder 전달 권장렌더 인덱스 전달 및 정렬 기준 게이트를 통해 드래그 안정성과 데이터 무결성을 함께 확보할 수 있습니다.
위 diff를 적용해 주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
frontend/eslint.config.js(1 hunks)frontend/package.json(1 hunks)frontend/src/components/drawers/DrawerBlock.tsx(3 hunks)frontend/src/components/drawers/InboxDrawer.tsx(5 hunks)frontend/src/components/project/ProjectName.tsx(2 hunks)frontend/src/components/project/edit/ProjectEdit.tsx(1 hunks)frontend/src/components/social/RecordContainer.tsx(4 hunks)frontend/src/components/social/RemarkContainer.tsx(1 hunks)frontend/src/components/social/common/DateBar.tsx(1 hunks)frontend/src/components/social/reactions/AnimatedCount.tsx(2 hunks)frontend/src/components/social/reactions/ReactionButton.tsx(1 hunks)frontend/src/components/tasks/DrawerTask.tsx(2 hunks)frontend/src/components/tasks/TaskFrame.tsx(1 hunks)frontend/src/components/tasks/TaskNameInput.tsx(1 hunks)frontend/src/components/today/ImportantTasks.tsx(1 hunks)frontend/src/pages/NotificationsPage.tsx(3 hunks)frontend/src/pages/ProjectListPage.tsx(4 hunks)frontend/src/pages/ProjectPage.tsx(4 hunks)frontend/src/pages/SignPage.jsx(1 hunks)frontend/src/pages/settings/Notifications.tsx(6 hunks)frontend/src/pages/settings/Profile.tsx(4 hunks)
🔇 Additional comments (19)
frontend/src/components/social/reactions/AnimatedCount.tsx (3)
1-1: useRef를 사용한 타이머 관리 리팩터링이 올바릅니다.이전에
useMemo(() => ({ id: null }), [])로 mutable 객체를 생성하던 패턴을useRef<number | null>(null)로 변경한 것은 정확합니다.useMemo는 계산 비용이 높은 값을 메모이제이션하기 위한 것이며, mutable 값을 저장하는 용도로는useRef가 적절합니다.Also applies to: 16-16
23-33: 타이머 관리 로직이 정확하게 구현되었습니다.
timerRef.current를 통한 타이머 접근 및 관리가 올바르게 구현되었습니다:
- 새 타이머 설정 전 기존 타이머 정리 (lines 23-26)
- 타임아웃 완료 후 참조 초기화 (line 32)
- 언마운트 시 정리 (lines 36-38)
이 패턴은 빠른 연속 변경 시 애니메이션을 올바르게 재시작하도록 보장합니다.
Also applies to: 36-38
40-40: 의존성 배열에서 timerRef 제거가 올바릅니다.ref 객체는 안정적인 참조이며 의존성 배열에 포함되어서는 안 됩니다. 이 변경은 불필요한 effect 재실행을 방지하고 React 모범 사례를 따릅니다.
frontend/src/pages/NotificationsPage.tsx (1)
1-1: 리팩터링이 올바르게 구현되었습니다.날짜 구분선 로직을 명령형 ref 기반 추적에서 선언적 메모이제이션 방식으로 변경한 것이 적절합니다. 이 접근 방식은 다음과 같은 이점을 제공합니다:
- 순수 계산:
useMemo내부의 로직이 부수 효과 없이 데이터를 변환합니다.- 적절한 메모이제이션:
data와locale이 변경될 때만 재계산되어 불필요한 연산을 방지합니다.- React Compiler 호환성: useRef를 사용한 렌더링 중 상태 추적 대신 메모이제이션된 파생 상태를 사용하여 React Compiler 규칙을 준수합니다.
- 단순화된 렌더링 로직: 중첩된 맵핑과 조건부 로직을 평탄화된 배열 구조로 대체했습니다.
의존성 배열
[data, locale]이 정확하며, 날짜 구분선 표시 로직(i === 0 && j === 0 || thisDate !== lastDate)도 올바릅니다.Also applies to: 73-105, 141-154
frontend/package.json (1)
62-62: eslint-plugin-react-hooks 7.0.0 업그레이드 확인Line 62에서 새 규칙 세트를 쓰기 위해 버전 범위를 7.x로 맞춘 선택이 적절합니다.
frontend/src/components/social/common/DateBar.tsx (1)
30-32: 의도 설명 주석이 명확합니다Line 31에서 규칙 비활성화 사유를 함께 남겨 두어, 필요 시 다시 검토하기 쉽겠습니다.
frontend/src/components/today/ImportantTasks.tsx (1)
103-107: 필요한 비활성화 주석으로 보입니다Line 105에서 최초 비어 있지 않은 필터를 자동 선택하려는 의도가 주석으로 명확히 설명되어 있어 유지보수에 도움이 됩니다.
frontend/src/components/social/reactions/ReactionButton.tsx (1)
33-35: 동기화 목적 주석이 적절합니다Line 34에서 외부 반응 상태와 로컬 상태를 맞추기 위한 예외 처리 이유가 잘 드러나 있습니다.
frontend/src/components/drawers/DrawerBlock.tsx (2)
82-86: 데이터 플래트닝 메모이제이션 적절무한 페이지 데이터를 안전하게 평탄화하고 메모이제이션한 점 좋습니다.
140-143: drag/drop 바인딩을 useEffect로 이동한 점 적절ref 안정화 이후에 핸들러를 연결해 DnD 오동작을 줄입니다.
frontend/src/pages/settings/Notifications.tsx (3)
28-36: 화면 분할 구성(Section)로의 리팩터링 적절*상태와 UI를 분리하고 조건부 렌더링으로 가독성과 유지보수성이 개선되었습니다.
185-191: 쿼리 무효화(invalidate) 위치 적절수정 후 excluded_types 쿼리를 명시적 키로 무효화하는 흐름이 명확합니다.
247-260:task_reaction타입 지원 확인 완료 Notification 타입 정의(frontend/api 및 backend 모델·마이그레이션)에task_reaction이 포함되어 있으며 서버 API도 정상 처리됩니다.frontend/src/components/tasks/DrawerTask.tsx (1)
1-1: useEffect 도입으로 DnD 바인딩 안정화렌더 시점 호출을 피하고 효과로 지연시킨 점 좋습니다.
frontend/src/components/project/ProjectName.tsx (2)
1-1: useEffect 도입 적절DnD 바인딩을 효과로 옮겨 안정성을 확보했습니다.
97-102: Inbox 예외 처리와 바인딩 조건부 적용 적절inbox는 드래그 비활성화, 그 외에만 drag(drop(ref)) 바인딩하는 로직이 명확합니다.
frontend/src/components/drawers/InboxDrawer.tsx (3)
13-13: type-only import로의 전환 좋습니다빌드 트리 쉐이킹과 타입 분리를 명확히 합니다.
54-58: 파생 tasks 메모이제이션 적절무한 스크롤 결과를 안전하게 평탄화/메모이즈합니다.
59-64: 임시 정렬 상태와 displayTasks 분리 OK로컬 UI 반응성을 높이는 구성입니다.
…in-react-hooks-6.1.1
minyoy
deleted the
dependabot/npm_and_yarn/frontend/eslint-plugin-react-hooks-6.1.1
branch
Bumps eslint-plugin-react-hooks from 5.2.0 to 6.1.1.
Changelog
Sourced from eslint-plugin-react-hooks's changelog.
Commits
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot show <dependency name> ignore conditionswill show all of the ignore conditions of the specified dependency@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Summary by CodeRabbit