React Review Audit

**Score: 92/100** · 7 errors · 53 warnings

Copy as prompt

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

## Errors (7)

1. [error] server-auth-actions — service/user.ts:6
Server action "upsertUser" — add auth check (auth(), getSession(), etc.) at the top

2. [error] server-auth-actions — service/user.ts:18
Server action "getDBUser" — add auth check (auth(), getSession(), etc.) at the top

3. [error] server-auth-actions — service/file.ts:9
Server action "createFile" — add auth check (auth(), getSession(), etc.) at the top

4. [error] server-auth-actions — service/file.ts:37
Server action "getFiles" — add auth check (auth(), getSession(), etc.) at the top

5. [error] rules-of-hooks — components/image-grid/index.tsx:27
React Hook "useQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.

6. [error] rules-of-hooks — components/upload.tsx:14
React Hook "useToast" is called conditionally. React Hooks must be called in the exact same order in every component render.

7. [error] rules-of-hooks — components/upload.tsx:15
React Hook "useQueryClient" is called conditionally. React Hooks must be called in the exact same order in every component render.

## Warnings (53)

8. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:21
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

9. [warning] design-no-redundant-size-axes — components/ui/context-menu.tsx:37
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

10. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:42
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

11. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:57
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

12. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:74
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

13. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:92
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

14. [warning] design-no-redundant-size-axes — components/ui/context-menu.tsx:105
w-3.5 h-3.5 → use the shorthand size-3.5 (Tailwind v3.4+)

15. [warning] design-no-redundant-size-axes — components/ui/context-menu.tsx:107
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

16. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:116
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

17. [warning] design-no-redundant-size-axes — components/ui/context-menu.tsx:128
w-3.5 h-3.5 → use the shorthand size-3.5 (Tailwind v3.4+)

18. [warning] design-no-redundant-size-axes — components/ui/context-menu.tsx:130
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

19. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:138
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

20. [warning] no-react19-deprecated-apis — components/ui/context-menu.tsx:156
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

21. [warning] no-react19-deprecated-apis — components/ui/card.tsx:5
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

22. [warning] no-react19-deprecated-apis — components/ui/card.tsx:20
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

23. [warning] no-react19-deprecated-apis — components/ui/card.tsx:32
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

24. [warning] no-react19-deprecated-apis — components/ui/card.tsx:44
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

25. [warning] no-react19-deprecated-apis — components/ui/card.tsx:56
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

26. [warning] no-react19-deprecated-apis — components/ui/card.tsx:64
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

27. [warning] no-react19-deprecated-apis — components/ui/button.tsx:43
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

28. [warning] server-after-nonblocking — service/file.ts:32
console.log() in server action — wrap in `after(() => console.log(...))` so it doesn't delay the user-visible response

29. [warning] design-no-redundant-size-axes — components/mode-toggle.tsx:32
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

30. [warning] design-no-redundant-size-axes — components/mode-toggle.tsx:43
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

31. [warning] no-unknown-property — components/image-grid/index.tsx:88
Unknown property found

32. [warning] design-no-three-period-ellipsis — components/image-grid/index.tsx:43
Three-period ellipsis ("...") in JSX text — use the actual ellipsis character "…" (or `…`)

33. [warning] nextjs-no-img-element — components/image-grid/index.tsx:81
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

34. [warning] async-await-in-loop — components/upload.tsx:21
await inside a for…of loop runs the calls sequentially — for independent operations, collect them and use `await Promise.all(items.map(...))` to run them concurrently

35. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:12
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

36. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:43
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

37. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:58
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

38. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:73
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

39. [warning] design-no-redundant-size-axes — components/ui/toast.tsx:86
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

40. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:91
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

41. [warning] no-react19-deprecated-apis — components/ui/toast.tsx:103
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

42. [warning] no-unknown-property — components/image-grid/image-dialog.tsx:118
Unknown property found

43. [warning] nextjs-no-img-element — components/image-grid/image-dialog.tsx:111
Use next/image instead of — provides automatic optimization, lazy loading, and responsive srcset

44. [warning] no-react19-deprecated-apis — components/ui/select.tsx:15
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

45. [warning] design-no-redundant-size-axes — components/ui/select.tsx:29
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

46. [warning] no-react19-deprecated-apis — components/ui/select.tsx:35
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

47. [warning] design-no-redundant-size-axes — components/ui/select.tsx:47
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

48. [warning] no-react19-deprecated-apis — components/ui/select.tsx:52
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

49. [warning] design-no-redundant-size-axes — components/ui/select.tsx:64
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

50. [warning] no-react19-deprecated-apis — components/ui/select.tsx:70
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

51. [warning] no-react19-deprecated-apis — components/ui/select.tsx:102
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

52. [warning] no-react19-deprecated-apis — components/ui/select.tsx:114
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

53. [warning] design-no-redundant-size-axes — components/ui/select.tsx:126
w-3.5 h-3.5 → use the shorthand size-3.5 (Tailwind v3.4+)

54. [warning] design-no-redundant-size-axes — components/ui/select.tsx:128
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

55. [warning] no-react19-deprecated-apis — components/ui/select.tsx:136
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

56. [warning] no-react19-deprecated-apis — components/ui/dialog.tsx:17
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

57. [warning] no-react19-deprecated-apis — components/ui/dialog.tsx:32
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

58. [warning] design-no-redundant-size-axes — components/ui/dialog.tsx:48
w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

59. [warning] no-react19-deprecated-apis — components/ui/dialog.tsx:84
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly

60. [warning] no-react19-deprecated-apis — components/ui/dialog.tsx:99
forwardRef is no longer needed on React 19+ — refs are regular props on function components; remove forwardRef and pass ref directly
```

---

### ❌ Errors (7)

**`server-auth-actions`**

Server action "upsertUser" — add auth check (auth(), getSession(), etc.) at the top

> Add `const session = await auth()` at the top and throw/redirect if unauthorized before any data access

[`service/user.ts:6`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/service/user.ts#L6)
[`service/user.ts:18`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/service/user.ts#L18)
[`service/file.ts:9`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/service/file.ts#L9)
[`service/file.ts:37`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/service/file.ts#L37)

**`rules-of-hooks`**

React Hook "useQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.

> Move the Hook call before the condition, or call it unconditionally and branch inside the Hook/effect instead.

[`components/image-grid/index.tsx:27`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/index.tsx#L27)
[`components/upload.tsx:14`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/upload.tsx#L14)
[`components/upload.tsx:15`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/upload.tsx#L15)

---

### ⚠️ Warnings (53)

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

[`components/ui/context-menu.tsx:21`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L21)
[`components/ui/context-menu.tsx:42`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L42)
[`components/ui/context-menu.tsx:57`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L57)
[`components/ui/context-menu.tsx:74`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L74)
[`components/ui/context-menu.tsx:92`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L92)
[`components/ui/context-menu.tsx:116`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L116)
[`components/ui/context-menu.tsx:138`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L138)
[`components/ui/context-menu.tsx:156`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L156)
[`components/ui/card.tsx:5`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L5)
[`components/ui/card.tsx:20`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L20)
[`components/ui/card.tsx:32`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L32)
[`components/ui/card.tsx:44`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L44)
[`components/ui/card.tsx:56`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L56)
[`components/ui/card.tsx:64`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/card.tsx#L64)
[`components/ui/button.tsx:43`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/button.tsx#L43)
[`components/ui/toast.tsx:12`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L12)
[`components/ui/toast.tsx:43`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L43)
[`components/ui/toast.tsx:58`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L58)
[`components/ui/toast.tsx:73`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L73)
[`components/ui/toast.tsx:91`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L91)
[`components/ui/toast.tsx:103`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L103)
[`components/ui/select.tsx:15`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L15)
[`components/ui/select.tsx:35`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L35)
[`components/ui/select.tsx:52`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L52)
[`components/ui/select.tsx:70`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L70)
[`components/ui/select.tsx:102`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L102)
[`components/ui/select.tsx:114`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L114)
[`components/ui/select.tsx:136`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L136)
[`components/ui/dialog.tsx:17`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/dialog.tsx#L17)
[`components/ui/dialog.tsx:32`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/dialog.tsx#L32)
[`components/ui/dialog.tsx:84`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/dialog.tsx#L84)
[`components/ui/dialog.tsx:99`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/dialog.tsx#L99)

**`design-no-redundant-size-axes`**

w-4 h-4 → use the shorthand size-4 (Tailwind v3.4+)

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

[`components/ui/context-menu.tsx:37`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L37)
[`components/ui/context-menu.tsx:105`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L105)
[`components/ui/context-menu.tsx:107`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L107)
[`components/ui/context-menu.tsx:128`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L128)
[`components/ui/context-menu.tsx:130`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/context-menu.tsx#L130)
[`components/mode-toggle.tsx:32`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/mode-toggle.tsx#L32)
[`components/mode-toggle.tsx:43`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/mode-toggle.tsx#L43)
[`components/ui/toast.tsx:86`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/toast.tsx#L86)
[`components/ui/select.tsx:29`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L29)
[`components/ui/select.tsx:47`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L47)
[`components/ui/select.tsx:64`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L64)
[`components/ui/select.tsx:126`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L126)
[`components/ui/select.tsx:128`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/select.tsx#L128)
[`components/ui/dialog.tsx:48`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/ui/dialog.tsx#L48)

**`no-unknown-property`**

Unknown property found

> Remove unknown property

[`components/image-grid/index.tsx:88`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/index.tsx#L88)
[`components/image-grid/image-dialog.tsx:118`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/image-dialog.tsx#L118)

**`nextjs-no-img-element`**

Use next/image instead of <img> — provides automatic optimization, lazy loading, and responsive srcset

> `import Image from 'next/image'` — provides automatic WebP/AVIF, lazy loading, and responsive srcset

[`components/image-grid/index.tsx:81`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/index.tsx#L81)
[`components/image-grid/image-dialog.tsx:111`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/image-dialog.tsx#L111)

**`server-after-nonblocking`**

console.log() in server action — wrap in `after(() => console.log(...))` so it doesn't delay the user-visible response

> `import { after } from 'next/server'` then wrap: `after(() => analytics.track(...))` — response isn't blocked

[`service/file.ts:32`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/service/file.ts#L32)

**`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…")

[`components/image-grid/index.tsx:43`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/image-grid/index.tsx#L43)

**`async-await-in-loop`**

await inside a for…of loop runs the calls sequentially — for independent operations, collect them and use `await Promise.all(items.map(...))` to run them concurrently

> Collect the items and use `await Promise.all(items.map(...))` to run independent operations concurrently

[`components/upload.tsx:21`](https://github.com/celeroncoder/drop/blob/acd5ea4a33d9d38670b779e314282ac823234ecc/components/upload.tsx#L21)

---

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