React 【実務・中級編】 派生状態（Derived State）の計算と不要なuseStateの削減 – React実践ガイド
こんにちは。チームのコードレビューをしていて、最近一番「あぁ、またやってるな…」と頭を抱えたくなるアンチパターンが何だか分かるかい？そう、「派生状態（Derived State）の不要な`useState`による二重管理」だ。中級に差し掛か...
状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）
React React 【実務・中級編】 flushSyncによるバッチ処理の強制解除 – React実践ガイド
こんにちは。Reactを触り始めて数年、コンポーネントの分割やカスタムフックの設計にも慣れ、「そろそろ中級の壁を突破したいぜ」という頃合いのエンジニアの皆さん、日々の開発お疲れ様です。プロダクトの規模が大きくなってくると、必ずと言っていいほ...
React 【実務・中級編】 関数型更新による競合状態の解決 – React実践ガイド
おい、ちょっといいか。最近レビューしたコードで、また例の「あれ」を踏み抜いているやつがいたんだよ。「ボタンを連打したら、カウントが意図したより全然増えないんです」「非同期処理が終わった後に状態を更新したら、なんか古い値が上書きしちゃってデー...
React 【実務・中級編】 複数useStateとオブジェクト状態の使い分け – React実践ガイド
おい、調子はどうだい？今日も元気に `useState` の無限ループと格闘していることだろう。おっと、そんな険しい顔をするなよ。今回はな、中級のエンジニアたちが必ず一度はハマり、そして「一体どっちで書くのが正解なんだ…？」と夜も眠れなくな...
React 【実務・中級編】 オブジェクト状態の不変性（Immutability） – React実践ガイド
やあ。今日も今日とてコンポーネントの海に溺れかけているかい？フロントエンドの現場に立っていると、後輩から「画面がどうしても再描画されないんです」「なんか古い状態のまま次の処理に進んじゃうんすよね」なんて相談を受けることが本当によくある。大抵...
React 【実務・中級編】 遅延初期化（Lazy Initialization） – React実践ガイド
やあ。今日も元気にコード書いてるかい？コードレビューをしていて、ジュニアからシニアへ駆け上がろうとしている中級エンジニアのコードで一番「あー、もったいないな」「これ、知らないと本番環境で地味に効いてくるやつだな」って思うポイントがあるんだ。...
React 【実務・中級編】 ステイルクロージャ（Stale Closure）の回避 – React実践ガイド
こんにちは。毎日フロントエンドのコードと向き合い、時には不可解なバグに頭を抱え、時には洗練されたアーキテクチャに酔いしれる日々を送っていることでしょう。さて、今日は中級へのステップアップを狙う君たちが必ずと言っていいほどハマる、そして実務の...
React 【実務・中級編】 React状態更新の非同期性とバッチ処理 – React実践ガイド
こんにちは。君、最近こんなコード書いて「あれ？」って頭を抱えなかったかい？const = useState(0);const handleClick = () => { setCount(count + 1); console.log(co...
React 【実務・中級編】 関数型更新（Updater Function）の仕組み – React実践ガイド
こんにちは。チームのコードレビューをしていて、最近一番「あぁ、惜しいな、でもこれ中級の壁よね」と思う瞬間がある。それが、`useState`の更新処理で罠にハマっているコードを見たときだ。例えば、こんなコードを書いたことはないだろうか？//...
React 【実務・中級編】 useStateの基本構文と初期化 – React実践ガイド
やあ。最近、チームのコードレビューをしていて、`useState`の初期化や更新処理のあたりで「おや？」と首を傾げたくなる実装にぶつかることが増えてきた。中級へのステップを駆け上がっている君たちなら、コンポーネントの中で `const = ...