React Review Audit

[react-doctor]

⚠️ 23 warnings

Copy as prompt

Fix the following React Review diagnostics in my codebase.

## Warnings (23)

1. [warning] design-no-redundant-size-axes — app/(main)/privacy/page.tsx:16
   w-8 h-8 → use the shorthand size-8 (Tailwind v3.4+)

2. [warning] design-no-bold-heading — app/(main)/privacy/page.tsx:17
   font-bold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

3. [warning] nextjs-missing-metadata — app/viewer/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

4. [warning] click-events-have-key-events — components/blob-mascot.tsx:82
   Enforce a clickable non-interactive element has at least one keyboard event listener.

5. [warning] no-static-element-interactions — components/blob-mascot.tsx:82
   Static HTML elements with event handlers require a role.

6. [warning] no-cascading-set-state — components/blob-mascot.tsx:40
   4 setState calls in a single useEffect — consider using useReducer or deriving state

7. [warning] design-no-space-on-flex-children — components/contribute/link-submission.tsx:78
   space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

8. [warning] design-no-three-period-ellipsis — components/contribute/link-submission.tsx:203
   Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `&hellip;`)

9. [warning] nextjs-missing-metadata — app/(main)/profile/page.tsx:1
   Page without metadata or generateMetadata export — hurts SEO

10. [warning] design-no-redundant-size-axes — app/(main)/profile/page.tsx:135
   w-64 h-64 → use the shorthand size-64 (Tailwind v3.4+)

11. [warning] design-no-redundant-size-axes — app/(main)/profile/page.tsx:136
   w-64 h-64 → use the shorthand size-64 (Tailwind v3.4+)

12. [warning] nextjs-image-missing-sizes — app/(main)/profile/page.tsx:156
   next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior

13. [warning] design-no-redundant-size-axes — components/back-to-top.tsx:61
   w-[calc(100%+16px)] h-[calc(100%+16px)] → use the shorthand size-[calc(100%+16px)] (Tailwind v3.4+)

14. [warning] design-no-bold-heading — app/(main)/page.tsx:48
   font-extrabold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500)

15. [warning] no-array-index-as-key — app/(main)/page.tsx:80
   Array index "i" used as key — causes bugs when list is reordered or filtered

16. [warning] no-document-start-view-transition — components/mode-toggle.tsx:20
   document.startViewTransition() bypasses React's <ViewTransition> integration — render a <ViewTransition> component and let React drive the transition (around startTransition / useDeferredValue / Suspense)

17. [warning] design-no-redundant-size-axes — app/(auth)/layout.tsx:14
   w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

18. [warning] no-react19-deprecated-apis — components/auth-provider.tsx:3
   useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'`

19. [warning] prefer-useReducer — components/contribute/direct-upload.tsx:9
   Component "DirectUpload" has 5 useState calls — consider useReducer for related state

20. [warning] design-no-space-on-flex-children — components/contribute/direct-upload.tsx:122
   space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL

21. [warning] no-generic-handler-names — components/contribute/direct-upload.tsx:151
   Non-descriptive handler name "handleChange" — name should describe what it does, not when it runs

22. [warning] design-no-three-period-ellipsis — components/contribute/direct-upload.tsx:160
   Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `&hellip;`)

23. [warning] label-has-associated-control — components/ui/label.tsx:9
   A form label must be associated with a control.

---

⚠️ Warnings (23)

w-8 h-8 → use the shorthand size-8 (Tailwind v3.4+) _{· 5 in 4 files}

_{design-no-redundant-size-axes}

Collapse w-N h-N to size-N (Tailwind v3.4+) when both axes match

File	Lines
app/(main)/profile/page.tsx	135, 136
app/(main)/privacy/page.tsx	16
components/back-to-top.tsx	61
app/(auth)/layout.tsx	14

font-bold on <h1> crushes counter shapes at display sizes — use font-semibold (600) or font-medium (500) _{· 2 in 2 files}

_{design-no-bold-heading}

Use font-semibold (600) or font-medium (500) on headings — 700+ crushes letter counter shapes at display sizes

File	Lines
app/(main)/privacy/page.tsx	17
app/(main)/page.tsx	48

Page without metadata or generateMetadata export — hurts SEO _{· 2 in 2 files}

_{nextjs-missing-metadata}

Add export const metadata = { title: '...', description: '...' } or export async function generateMetadata()

File	Lines
app/viewer/page.tsx	1
app/(main)/profile/page.tsx	1

space-y-4 on a flex/grid parent — use gap-y-4 instead. Per-sibling margins phantom-gap on conditional render and don't mirror in RTL _{· 2 in 2 files}

_{design-no-space-on-flex-children}

Use gap-* on the flex/grid parent. space-x-* / space-y-* produce phantom gaps when a sibling is conditionally rendered, lose vertical spacing on wrapped lines, and don't mirror in RTL

File	Lines
components/contribute/link-submission.tsx	78
components/contribute/direct-upload.tsx	122

Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`) _{· 2 in 2 files}

_{design-no-three-period-ellipsis}

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

File	Lines
components/contribute/link-submission.tsx	203
components/contribute/direct-upload.tsx	160

Enforce a clickable non-interactive element has at least one keyboard event listener. _{· 1 in 1 file}

_{click-events-have-key-events}

Visible, non-interactive elements with click handlers must have one of keyup, keydown, or keypress listener.

File	Lines
components/blob-mascot.tsx	82

Static HTML elements with event handlers require a role. _{· 1 in 1 file}

_{no-static-element-interactions}

Add a role attribute to this element, or use a semantic HTML element instead.

File	Lines
components/blob-mascot.tsx	82

4 setState calls in a single useEffect — consider using useReducer or deriving state _{· 1 in 1 file}

_{no-cascading-set-state}

Combine into useReducer: const [state, dispatch] = useReducer(reducer, initialState)

File	Lines
components/blob-mascot.tsx	40

next/image with fill but no sizes — the browser downloads the largest image. Add a sizes attribute for responsive behavior _{· 1 in 1 file}

_{nextjs-image-missing-sizes}

Add sizes for responsive behavior: sizes="(max-width: 768px) 100vw, 50vw" matching your layout breakpoints

File	Lines
app/(main)/profile/page.tsx	156

Array index "i" used as key — causes bugs when list is reordered or filtered _{· 1 in 1 file}

_{no-array-index-as-key}

Use a stable unique identifier: key={item.id} or key={item.slug} — index keys break on reorder/filter

File	Lines
app/(main)/page.tsx	80

document.startViewTransition() bypasses React's <ViewTransition> integration — render a <ViewTransition> component and let React drive the transition (around startTransition / useDeferredValue / Suspense) _{· 1 in 1 file}

_{no-document-start-view-transition}

Render a <ViewTransition> component and update inside startTransition / useDeferredValue — React calls startViewTransition for you

File	Lines
components/mode-toggle.tsx	20

useContext is superseded by `use()` on React 19+ — `use()` reads context conditionally inside hooks, branches, and loops; switch to `import { use } from 'react'` _{· 1 in 1 file}

_{no-react19-deprecated-apis}

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

File	Lines
components/auth-provider.tsx	3

Component "DirectUpload" has 5 useState calls — consider useReducer for related state _{· 1 in 1 file}

_{prefer-useReducer}

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

File	Lines
components/contribute/direct-upload.tsx	9

Non-descriptive handler name "handleChange" — name should describe what it does, not when it runs _{· 1 in 1 file}

_{no-generic-handler-names}

Rename to describe the action: e.g. handleSubmit → saveUserProfile, handleClick → toggleSidebar

File	Lines
components/contribute/direct-upload.tsx	151

A form label must be associated with a control. _{· 1 in 1 file}

_{label-has-associated-control}

Either give the label a htmlFor attribute with the id of the associated control, or wrap the label around the control.

File	Lines
components/ui/label.tsx	9

---

^{Reviewed by reactreview for commit de360e2. Configure here.}