React Review Audit

**Score: 93/100** · 4 errors · 9 warnings

Copy as prompt

```text
Fix the following React Review diagnostics in my codebase.

## Errors (4)

1. [error] jsx-key — src/components/LeaderBoard/index.tsx:40
Missing "key" prop for element in iterator.

2. [error] jsx-key — src/pages/predict.tsx:140
Missing "key" prop for element in iterator.

3. [error] jsx-key — src/pages/index.tsx:63
Missing "key" prop for element in iterator.

4. [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 (9)

5. [warning] react-compiler-destructure-method — src/components/Header.tsx:120
Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

6. [warning] react-compiler-destructure-method — src/components/Header.tsx:207
Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

7. [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

8. [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

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

10. [warning] design-no-vague-button-label — src/components/PredictionModal.tsx:61
Vague button label "Submit" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens

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

12. [warning] rerender-lazy-state-init — src/pages/index.tsx:50
useState(getDemoMatches()) calls initializer on every render — use useState(() => getDemoMatches()) for lazy initialization

13. [warning] react-compiler-destructure-method — src/pages/index.tsx:124
Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on
```

---

### ❌ Errors (4)

**`jsx-key`**

Missing "key" prop for element in iterator.

> Add a "key" prop to the element in the iterator (https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

[`src/components/LeaderBoard/index.tsx:40`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/components/LeaderBoard/index.tsx#L40)
[`src/pages/predict.tsx:140`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/pages/predict.tsx#L140)
[`src/pages/index.tsx:63`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/pages/index.tsx#L63)

**`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/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/package.json#L0)

---

### ⚠️ Warnings (9)

**`react-compiler-destructure-method`**

Destructure for clarity: `const { push } = useRouter()` then call `push(...)` directly — easier for React Compiler to memoize and clearer about which methods this component depends on

> Destructure the method up front: `const { push } = useRouter()` then call `push(...)` directly — clearer dependency graph and easier for React Compiler to memoize

[`src/components/Header.tsx:120`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/components/Header.tsx#L120)
[`src/components/Header.tsx:207`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/components/Header.tsx#L207)
[`src/pages/index.tsx:124`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/pages/index.tsx#L124)

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

**`no-derived-useState`**

useState initialized from prop "teamA" — 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/PredictionModal.tsx:13`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/components/PredictionModal.tsx#L13)

**`design-no-vague-button-label`**

Vague button label "Submit" — name the action ("Save changes", "Send invite", "Delete account") so screen readers and hesitant users know what happens

> Name the action: "Save changes" instead of "Continue", "Send invite" instead of "Submit", "Delete account" instead of "OK". The label IS the button's accessible name

[`src/components/PredictionModal.tsx:61`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/components/PredictionModal.tsx#L61)

**`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:27`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/pages/user/login.tsx#L27)

**`rerender-lazy-state-init`**

useState(getDemoMatches()) calls initializer on every render — use useState(() => getDemoMatches()) for lazy initialization

> Wrap in an arrow function so it only runs once: `useState(() => expensiveComputation())`

[`src/pages/index.tsx:50`](https://github.com/celeroncoder/theanalyst/blob/55d734c287fbb36b126755e63da28a22ea8ca4de/src/pages/index.tsx#L50)

---

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