Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

React Review Audit

Aperta
  • Qualcosa non va?
#1 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
nextjs, react, typescript
Ambito
accessibility, frontend, performance

Direzione di ricerca

Ispeziona i file elencati, iniziando dalle quattro posizioni degli errori: i tre siti degli iteratori e la gestione del movimento referenziata da package.json. Esamina quindi le posizioni degli avvisi in Header.tsx, _document.tsx, PredictionModal.tsx, pages/index.tsx e pages/user/login.tsx. Il lavoro è completato quando i diagnostici segnalati sono stati risolti e React Review è stato eseguito nuovamente per confermare che i problemi rilevati siano risolti.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Score: 93/100 · 4 errors · 9 warnings

Copy as prompt 
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 <link> — 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 <link> — 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 `&hellip;`)

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
src/pages/predict.tsx:140
src/pages/index.tsx:63

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 (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
src/components/Header.tsx:207
src/pages/index.tsx:124

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

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

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

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:27

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(() =&gt; expensiveComputation())

src/pages/index.tsx:50

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

Lingua principale
TypeScript
Stelle
1
Fork
0
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.