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).}

Bắt đầu với các vị trí được liên kết trong service/user.ts và service/file.ts cho bốn lỗi xác thực của server action, sau đó kiểm tra components/image-grid, components/upload và các tệp components/ui được liệt kê để xử lý các chẩn đoán còn lại. Chạy lại audit React Review sau khi xử lý bảy lỗi và 53 cảnh báo để tất cả các chẩn đoán được liệt kê đều được giải quyết.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.