Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

React Review Audit

Đang mở
#7 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
next.js, react, tailwindcss, typescript

Hướng nghiên cứu

Bắt đầu với các điểm vào được liệt kê: package.json, src/components/TodoList/TodoCard/index.tsx, src/components/Header/index.tsx, src/components/EditTodoModal.tsx, src/components/AddTodo.tsx, src/pages/_document.tsx và src/pages/user/login.tsx. Xem xét từng chẩn đoán của React Review và xác nhận rằng các cảnh báo về reduced-motion, bundle-size, state, typography, palette, React 19 và font-loading đã được xử lý tại tất cả các vị trí được tham chiếu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Score: 93/100 · 1 error · 15 warnings

Copy as prompt
Fix the following React Review diagnostics in my codebase.

## Errors (1)

1. [error] require-reduced-motion — package.json:0
   Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

## Warnings (15)

2. [warning] use-lazy-motion — src/components/TodoList/TodoCard/index.tsx:15
   Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

3. [warning] no-derived-useState — src/components/TodoList/TodoCard/index.tsx:24
   useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

4. [warning] use-lazy-motion — src/components/Header/index.tsx:22
   Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

5. [warning] design-no-three-period-ellipsis — src/pages/user/login.tsx:28
   Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

6. [warning] no-react19-deprecated-apis — src/components/EditTodoModal.tsx:11
   forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

7. [warning] prefer-useReducer — src/components/EditTodoModal.tsx:18
   Component "EditTodoModal" has 5 useState calls — consider useReducer for related state

8. [warning] no-derived-useState — src/components/EditTodoModal.tsx:19
   useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

9. [warning] no-derived-useState — src/components/EditTodoModal.tsx:20
   useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

10. [warning] no-derived-useState — src/components/EditTodoModal.tsx:21
   useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

11. [warning] no-derived-useState — src/components/EditTodoModal.tsx:22
   useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

12. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:50
   text-slate-300 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

13. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:59
   text-slate-600 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

14. [warning] design-no-default-tailwind-palette — src/components/AddTodo.tsx:59
   text-slate-500 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

15. [warning] nextjs-no-font-link — src/pages/_document.tsx:12
   Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests

16. [warning] nextjs-no-font-link — src/pages/_document.tsx:18
   Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests

❌ Errors (1)

require-reduced-motion

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

Add useReducedMotion() from your animation library, or a @media (prefers-reduced-motion: reduce) CSS query

package.json:0


⚠️ Warnings (15)

no-derived-useState

useState initialized from prop "todo" — if this value should stay in sync with the prop, derive it during render instead

Remove useState and compute the value inline: const value = transform(propName)

src/components/TodoList/TodoCard/index.tsx:24
src/components/EditTodoModal.tsx:19
src/components/EditTodoModal.tsx:20
src/components/EditTodoModal.tsx:21
src/components/EditTodoModal.tsx:22

design-no-default-tailwind-palette

text-slate-300 reads as the Tailwind template default — use zinc (true neutral), neutral (warmer), or stone (warmest)

Replace indigo-* / gray-* / slate-* with project tokens, your brand color, or a less-default neutral (zinc, neutral, stone)

src/components/AddTodo.tsx:50
src/components/AddTodo.tsx:59
src/components/AddTodo.tsx:59

use-lazy-motion

Import "m" with LazyMotion instead of "motion" — saves ~30kb in bundle size

Use import { LazyMotion, m } from "framer-motion" with domAnimation features — saves ~30kb

src/components/TodoList/TodoCard/index.tsx:15
src/components/Header/index.tsx:22

nextjs-no-font-link

Loading Google Fonts via <link> — use next/font instead for self-hosting, zero layout shift, and no render-blocking requests

import { Inter } from "next/font/google" — self-hosted, zero layout shift, no render-blocking requests

src/pages/_document.tsx:12
src/pages/_document.tsx:18

design-no-three-period-ellipsis

Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or &hellip;)

Use the typographic ellipsis "…" (or &hellip;) instead of three periods — pairs with action-with-followup labels ("Rename…", "Loading…")

src/pages/user/login.tsx:28

no-react19-deprecated-apis

forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

Pass ref as a regular prop on function components — forwardRef is no longer needed in React 19+. Replace useContext(X) with use(X) for branch-aware context reads. Only enabled on projects detected as React 19+.

src/components/EditTodoModal.tsx:11

prefer-useReducer

Component "EditTodoModal" has 5 useState calls — consider useReducer for related state

Group related state: const [state, dispatch] = useReducer(reducer, { field1, field2, ... })

src/components/EditTodoModal.tsx:18


Last scored May 14, 2026 at 9:39 AM UTC. Maintained by React Review.

Ngôn ngữ chính
TypeScript
Star
0
Fork
0
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.