React 代碼審查提示詞（hooks 依賴、無效重渲染、key、副作用清理逐項檢查）
審查 React 組件或排查「頁面卡、數據閃、請求發兩次、狀態不更新」這類問題時用：讓 AI 按 React 特有的問題清單逐項檢查 hooks 用法、渲染性能、列表 key、副作用清理和狀態設計，給出修改後的代碼。
通用大模型 對話模型通用
你是一名精通 React 的前端工程師，熟悉函數組件、hooks 的規則和常見反模式。請審查下面的組件。 背景： - React 版本與框架：[如 React 19 + Next.js] - 狀態管理方式：[狀態管理方式]（例：useState、Redux、Zustand） - 用戶反饋的問題：[如輸入框打字卡頓，沒有就寫無] - 組件代碼（包括它用到的自定義 hook）： [粘貼代碼] 逐項檢查，只報告真實存在的問題： 1. hooks 規則：是否在條件、循環裏調用 hook；自定義 hook 命名是否以 use 開頭。 2. useEffect： - 依賴數組是否完整，有沒有閉包拿到舊值； - 是否把本該在渲染時直接計算的派生數據放進了 effect + setState； - 訂閱、定時器、事件監聽、未完成的請求是否在清理函數里取消； - 開發模式嚴格模式下 effect 會執行兩次，代碼是否能承受。 3. 渲染性能：每次渲染都新建的對象、數組、函數傳給了被 memo 的子組件；狀態放得太高導致大範圍重渲染；是否真的需要 useMemo / useCallback（不要建議到處加）。 4. 列表：key 是否穩定唯一，有沒有用數組下標導致刪除、排序後狀態錯位。 5. 狀態設計：重複或可推導的狀態、多個狀態應該合併、受控與非受控輸入混用。 6. 其他：直接修改 state 對象或數組、在渲染中產生副作用、可訪問性（按鈕用 div、缺少 label）。 輸出： - 問題表：嚴重程度 | 位置 | 問題 | 會導致的現象； - 對嚴重問題給出修改後的代碼片段，說明改了什麼； - 如果用戶反饋的問題能被某條解釋，明確指出是哪一條。 不確定的寫「需確認」，例如組件的父組件如何傳參會影響結論時。
高亮處換成你自己的內容：[如 React 19 + Next.js]、[狀態管理方式]、[如輸入框打字卡頓，沒有就寫無]、[粘貼代碼]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[用戶反饋的問題] 很有用，「請求發了兩次」「切換標籤後顯示的還是上一個人的數據」這類描述能讓 AI 直接對上原因。組件用到的自定義 hook 一定要一起貼，很多問題藏在 hook 裏。
常見坑：
- 開發模式下 React 嚴格模式會故意讓 effect 掛載、卸載、再掛載一次，看到請求發兩次不一定是 Bug；但如果沒有清理函數導致重複訂閱，那就是問題。
- 不要讓 AI「給所有函數都加 useCallback」。只有傳給 memo 組件、或作為其他 hook 依賴的函數才值得加，否則只會讓代碼更難讀。
- 用數組下標做 key，在列表只追加、不刪除不排序時沒問題；一旦能刪除或拖拽排序，輸入框內容就會串行。
追問技巧：修改後把新代碼貼回去，說「只檢查上次指出的問題是否都已修復，有沒有引入新的依賴問題」。
示例輸出
示例，僅供參考（節選）
| 嚴重程度 | 位置 | 問題 | 現象 |
|---|---|---|---|
| 嚴重 | useEffect 第 14 行 | 依賴數組缺少 userId，切換用戶後不會重新請求 | 顯示上一個用戶的數據 |
| 嚴重 | 同上 | 請求沒有取消，快速切換時舊請求後返回會覆蓋新數據 | 數據閃回 |
| 一般 | fullName 狀態 | 由 first 和 last 推導，不需要單獨存成狀態 | 多一次渲染 |
jsx
useEffect(() => {
const controller = new AbortController()
fetch(`/api/users/${userId}`, { signal: controller.signal })
.then((r) => r.json())
.then(setUser)
.catch((e) => { if (e.name !== 'AbortError') setError(e) })
return () => controller.abort()
}, [userId])
const fullName = `${first} ${last}` // 渲染時直接計算同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～