framework
React
Meta が開発する宣言的な UI ライブラリ。コンポーネントと Hooks（useState / useEffect 等）で状態と副作用を管理し、Next.js など多くのフレームワークの基盤になっている。
問題一覧（17）
React Context の値が更新されない
Context の更新が consumer に伝わらない事象は、value の参照が変わっていないか、Provider 自体が毎レンダーで再マウントしているのが典型。useState / useReducer を経由して値を渡し、複合オブジェクトは useMemo で参照を安定させる。
更新: 2026-05-28、タグ: context、provider、state
React で controlled / uncontrolled input 警告が消せない
「A component is changing an uncontrolled input to be controlled」警告は、value プロップが undefined と確定値の間で切り替わると出る。初期値を必ず空文字や null 以外で与え、value / defaultValue を混在させないのが原則。
更新: 2026-05-23、タグ: input、form、controlled
React Error Boundary で非同期 / イベントハンドラのエラーがキャッチできない
Error Boundary は子ツリーのレンダリング中・ライフサイクル・コンストラクタで投げられた例外しか捕まえない。イベントハンドラや非同期 / setTimeout のエラーは別途 try/catch して setState で再投入する必要がある。
更新: 2026-05-29、タグ: error-boundary、async、event-handler
React のハイドレーションエラー（Hydration mismatch）が解消できない
SSR が出力した HTML とクライアント側の初回レンダリング結果が食い違うと Hydration mismatch が出る。new Date() や Math.random() の JSX 直書き、window 依存、HTML 入れ子違反、ブラウザ拡張による DOM 書き換えが主因。
更新: 2026-07-16、タグ: hydration、ssr、nextjs
React で「Invalid hook call」が解決できない
Hook をコンポーネント関数のトップレベル以外で呼んだ、または react が二重に読み込まれていると Invalid hook call が出る。呼び出し位置と react / react-dom のバージョン整合を確認する。
更新: 2026-05-17、タグ: hooks、rules-of-hooks、invalid-hook-call
React で「Each child in a list should have a unique key prop」警告が消せない
リスト描画の要素に一意な key を付けないと React は再利用判定に失敗し警告を出す。配列インデックスは最終手段にして、データ由来の安定 ID を使うのが基本。Fragment にも key を付ける場合は明示形を使う。
更新: 2026-05-15、タグ: key、list、rendering
React で「Maximum update depth exceeded」が解決できない
レンダリングのたびに state 更新が走ると再レンダリングが連鎖し Maximum update depth exceeded になる。ハンドラの即時呼び出し、render 中の setState、useEffect の依存設計を見直す。
更新: 2026-06-25、タグ: setstate、render、infinite-loop
React で「Objects are not valid as a React child」が解消できない
JSX の中括弧にオブジェクトや配列内オブジェクト、Promise、Date などを直接置くと React は描画できずこのエラーを投げる。表示したい文字列や数値、React 要素に変換してから埋め込むのが基本。
更新: 2026-05-15、タグ: jsx、rendering、error
React useRef の current が null で参照できない
useRef(null) の current は最初のレンダリング時には null。DOM 参照は副作用 (useEffect) 内で読む、forwardRef 対象でないコンポーネントには ref が渡らない点をふまえて使い分ける。
更新: 2026-05-22、タグ: useRef、ref、null
React で「Rendered more hooks than during the previous render」が解決できない
フックを条件分岐や早期 return の後で呼ぶと、レンダーごとに呼ぶ数が変わって出る。フックは必ずコンポーネント先頭で無条件に呼ぶ。
更新: 2026-07-28、タグ: hooks、rules-of-hooks、conditional
React で setState しても画面が更新されない
state は同一参照のオブジェクト / 配列を渡しても再レンダリングされない。スプレッドで新しい参照を作るか、関数型 setState で前回値から派生させる。クロージャ越しの古い state も典型的な原因。
更新: 2026-06-01、タグ: state、hooks、immutability
React で Strict Mode による useEffect の 2 重実行が解決できない
React 18 以降の Strict Mode は、開発ビルドのみコンポーネントを意図的に「マウント → アンマウント → 再マウント」させ、useEffect を 2 回走らせます。クリーンアップ漏れを検出するための仕様で、本番では発生しません。StrictMode を外さず、cleanup で副作用を取り消すのが正しい対処です。
更新: 2026-06-04、タグ: strict-mode、useEffect、react18
React で「Too many re-renders」が解消できない（無限レンダリングループ）
「Too many re-renders. React limits the number of renders to prevent an infinite loop」は、レンダリング中に state を無条件で更新しているのが原因。イベントに関数を即時実行で渡していないかをまず疑う。
更新: 2026-08-08、タグ: rerender、infinite-loop、hooks
React で「Cannot update a component while rendering a different component」が消えない
レンダリング中に別コンポーネントの set 関数を呼ぶと出る警告。状態更新は render の外（イベントハンドラや useEffect）へ移す。
更新: 2026-08-08、タグ: setstate、render、warning
React useEffect の cleanup が期待通り呼ばれない
useEffect が返した関数（cleanup）はアンマウント時と次回 effect 実行直前に走る。React 18 の Strict Mode では開発時にマウント直後にも一度実行される。cleanup が呼ばれないように見える場合は、依存配列の漏れ、effect 内で例外を投げた、登録時と解除時で関数参照が違う、のいずれかを疑う。
更新: 2026-08-01、タグ: useeffect、cleanup、strict-mode
React の useEffect で無限ループが止められない
useEffect の依存配列に毎レンダリングで参照が変わるオブジェクトや関数を入れると、setState → 再レンダリング → 依存変化 → 再実行が連鎖して無限ループになる。プリミティブに分解し、useMemo / useCallback で参照を安定化し、関数型 setState で依存を切る。
更新: 2026-06-01、タグ: useeffect、hooks、infinite-loop
React の useMemo がメモ化されず毎回再計算される
useMemo は依存配列の値を Object.is で比較する。オブジェクトや関数を依存に入れると参照が毎回変わり再計算される。依存はプリミティブに絞り、参照は親側で useMemo / useCallback により安定化させる。
更新: 2026-07-09、タグ: usememo、memoization、dependency-array