よく遭遇するエラーの原因・NG例・OK例・解決ヒントをまとめました。
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.
if文やループの中でフックを呼んでいる
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect...
useEffect内でsetStateを呼び、その値がdepsに含まれている
（エラーメッセージは出ないが、値が更新されない・古い値のまま動作する）
useEffect・useCallbackが古い状態やpropsの値を参照し続ける
Warning: Can't perform a React state update on an unmounted component.
アンマウント後に非同期処理がsetStateを呼んでいる
Warning: Each child in a list should have a unique "key" prop.
map()でリストを描画するときにkeyプロパティが指定されていない
Error: Hydration failed because the initial UI does not match what was rendered on the server.
サーバーとクライアントで最初のレンダリング結果が異なる
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
setStateをレンダー中に直接呼んでいる（イベントハンドラに渡していない）
Error: Event handlers cannot be passed to Client Component props.
Server ComponentにonClickなどのイベントハンドラを渡している
Error: Route '...' used `params.slug`. `params` should be awaited before using its properties.
Next.js 15からparamsはPromiseになったが、awaitせずに使っている
TypeError: Cannot read properties of undefined (reading 'name')
null / undefined かもしれない値のプロパティに直接アクセスしている
（エラーにはならないが、型安全性が失われる）
anyを使うことでTypeScriptの型チェックが無効化され、実行時エラーの元になる
（エラーにはならないが、useEffectが再実行されない・Reactが再レンダーしないなどのバグになる）
見た目が同じオブジェクト・配列でも、別の参照なら===でfalseになる
（エラーにはならないが、UIが更新されないバグになる）
stateオブジェクトを直接変更してもReactは変化を検知できない
Access to fetch at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy.
異なるオリジンへのリクエストがブラウザにブロックされている
Type 'string' is not assignable to type 'number'
期待している型と異なる型の値を代入・渡しようとしている
Property 'xxx' does not exist on type 'YYY'
型定義に存在しないプロパティにアクセスしようとしている
（エラーメッセージなし — スタイルが開発環境では動くが本番では適用されない）
動的に生成したTailwindクラスがPurge（Tree Shaking）で削除される