Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

React Review Audit

オープン
#7 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
リファクタリング
明瞭さ
おおむね明確
活発さ
静か
技術スタック
next.js, react, tailwindcss, typescript

調査の方向性

列挙されたエントリポイントから開始します: 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、src/pages/user/login.tsx。各 React Review 診断を確認し、reduced-motion、bundle-size、state、typography、palette、React 19、font-loading に関する警告が、参照されているすべての場所で対処されていることを確認してください。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
0
フォーク
0
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。