React 【実務・中級編】 副作用関数内部での条件分岐 – React実践ガイド
こんにちは。プロダクトの規模が膨らみ、`useEffect` の嵐に頭を悩ませているあなたなら、一度はこう思ったことがあるはずです。「依存配列で細かく制御するの、もう限界じゃないか？ いっそ副作用の中で `if` 文で弾いちゃえば楽なんじゃ...
React
React React 【実務・中級編】 外部システムとの同期 – React実践ガイド
こんにちは。チームのコードレビューをしていて、一番「おっ、よくハマるポイントを分かっているね！」と嬉しくなる瞬間がどこか知っているかい？ そう、`useEffect`を使った外部システムとの同期処理、そしてそのクリーンアップが綺麗に書かれて...
React 【実務・中級編】 タイマー処理（setTimeout/setInterval）の制御 – React実践ガイド
「画面を切り替えたはずなのに、コンソールに謎のエラーが吐き出され続けている…」「タイマーの速度が、時間が経つにつれてなぜか倍速、3倍速と加速していく…」フロントエンドの実務開発において、誰もが一度は遭遇するこの現象。原因はほぼ100%、「タ...
React 【実務・中級編】 イベントリスナーの登録と解除 – React実践ガイド
やあ。最近、プロダクトのパフォーマンス改善やメモリリークの調査に追われていないかい？中級から一歩抜け出して「シニア」の領域に足を踏み入れようとしている君なら、一度は「`useEffect`の中でイベントリスナーを登録したはいいが、本当に正し...
React 【実務・中級編】 非同期処理におけるレースコンディションの回避 – React実践ガイド
こんにちは。チームのコードレビューをしていて、一番「あぁ、惜しいな、でもこれジュニアの時は絶対ハマるやつだ」って胸が締め付けられる瞬間があるんだよね。それが、`useEffect`の中での非同期処理とレースコンディション（競合状態）の放置。...
React 【実務・中級編】 useEffect内での非同期処理の扱い – React実践ガイド
やあ、調子はどうだい？最近、コードレビューをしていて一番「あー、また踏み抜いてるな」って思うポイントがどこだか分かるかい？そう、今回のテーマである `useEffect` 内での非同期処理の扱い だ。中級に差し掛かったエンジニアが、なぜか「...
React 【実務・中級編】 React Strict Modeにおける二重実行 – React実践ガイド
こんにちは。フロントエンドチームのシニア・アーキテクトだ。今日もみんな、コンポーネントのライフサイクルや副作用の制御に頭を悩ませていることだろう。さて、今回は実務でReactを書いていて、誰もが一度は「おや？」と首を傾げるあの現象――「開発...
React 【実務・中級編】 無限ループの発生原因とデバッグ手法 – React実践ガイド
お疲れ。最近、PR（プルリクエスト）のレビューをしていて「あ、これやっちゃったな」というコードを本当によく見かける。画面がフリーズする、ファンが爆音で回り出す、そしてブラウザがクラッシュする――原因の多くは、大体こいつだ。`useEffec...
React 【実務・中級編】 参照型（オブジェクト・配列）の依存配列における注意点 – React実践ガイド
こんにちは。フロントエンドチームのシニアアーキテクトだ。最近、コードレビューをしていて「またこれか…」と頭を抱えたポイントがある。それが、`useEffect`の依存配列（dependency array）にオブジェクトや配列をそのまま突っ...
React 【実務・中級編】 プリミティブ値の依存配列による制御 – React実践ガイド
お疲れ。最近、君が書いたコンポーネントのコードレビューをしたんだけどさ……正直、「あ、これまたやってるな」って箇所がいくつかあったんだよね。特に、`useEffect` の依存配列（dependency array）まわり。「とりあえず値が...