React Review Audit

**Score: 93/100** · 1 error · 15 warnings

Copy as prompt

```text
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 — 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 — 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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/package.json#L0)

---

### ⚠️ 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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/TodoList/TodoCard/index.tsx#L24)
[`src/components/EditTodoModal.tsx:19`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L19)
[`src/components/EditTodoModal.tsx:20`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L20)
[`src/components/EditTodoModal.tsx:21`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L21)
[`src/components/EditTodoModal.tsx:22`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L22)

**`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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/AddTodo.tsx#L50)
[`src/components/AddTodo.tsx:59`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/AddTodo.tsx#L59)
[`src/components/AddTodo.tsx:59`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/AddTodo.tsx#L59)

**`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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/TodoList/TodoCard/index.tsx#L15)
[`src/components/Header/index.tsx:22`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/Header/index.tsx#L22)

**`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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/pages/_document.tsx#L12)
[`src/pages/_document.tsx:18`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/pages/_document.tsx#L18)

**`design-no-three-period-ellipsis`**

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

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

[`src/pages/user/login.tsx:28`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/pages/user/login.tsx#L28)

**`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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L11)

**`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`](https://github.com/celeroncoder/doder_web/blob/0959e35467623765dbf420b1977f1df62053fcc8/src/components/EditTodoModal.tsx#L18)

---

_{Last scored May 14, 2026 at 9:39 AM UTC. Maintained by [React Review](https://github.com/millionco/react-review).}