React 【実務・中級編】 Zustandにおけるセレクターによるレンダリング最適化 – React実践ガイド
やあ、調子はどうだい？Reactでの状態管理、日々の開発で頭を悩ませていないかい？「とりあえず`useState`で全部持って、子コンポーネントにプロパティをバケツリレーしていくうちに、何がなんだかわからなくなった」「グローバルな状態管理を...
状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）
React React 【実務・中級編】 Zustandによるストアの作成とフックの利用 – React実践ガイド
やあ。今日も元気にコンポーネントの再レンダリングと戦っているかい？フロントエンドをやっていると、一度はこんな悩みにぶつかるはずだ。「おいおい、このコンポーネントのツリー、どこまで深くPropsをバケツリレーしなきゃいけないんだ……？」あるい...
React 【実務・中級編】 カスタムフックにおける依存関係の管理と引数設計 – React実践ガイド
お疲れ。最近、君が書いたカスタムフックのコードをいくつかレビューさせてもらったんだけどさ……いや、動くには動くんだよ。動くにはね。ただ、再レンダリングの嵐が起きたり、古いステートを参照し続ける「古き良きバグ」が潜んでいたりして、夜も眠れなく...
React 【実務・中級編】 カスタムフックへの状態ロジックの抽出と再利用 – React実践ガイド
お疲れ様です。最近、どのコードレビューを見ても「コンポーネントが肥大化して神コンポーネント化している」「似たような非同期データのフェッチ処理があちこちにコピペされている」という技術負債の山に直面していませんか？中級からシニアへとステップアッ...
React 【実務・中級編】 useReducerとuseContextの組み合わせによるグローバル状態管理 – React実践ガイド
やあ。今日も今日とてコンポーネントの海を泳ぎ回っていることだな。「Reduxを入れるほどでもないけれど、`useState`と`prop drilling（バケツリレー）`の嵐でコンポーネントがスパゲッティ化してきた……」中級の壁にぶつかっ...
React 【実務・中級編】 useContextの再レンダリング問題と最適化手法 – React実践ガイド
やあ。今日も今日とてコードレビューに追われてるかい？フロントエンドの海原へ漕ぎ出し、数々のバグという名の海中要塞を突破してきた中級エンジニアのキミなら、そろそろ「Reactの裏側の動き」にモヤモヤし始める頃合いなんじゃないかと思う。「よし、...
React 【実務・中級編】 useContextによるコンテキストプロバイダーの構築 – React実践ガイド
やあ。現場のコードレビューで「とりあえずContextに入れとけばいいか」という安易な実装を見て、思わず天を仰いだことはないかい？中級の壁を抜け出し、シニアへとステップアップしようとしている君なら、Context APIが「魔法のグローバル...
React 【実務・中級編】 reducer関数における純粋関数としての実装ルール – React実践ガイド
こんにちは。チームのコードレビューをしていて、「あ、またここでやっちゃってるな」と夜な夜な赤入れをするのが日課のシニアアーキテクトだ。今回は、Reactの`useReducer`、そしてその心臓部である「reducer関数における純粋性の担...
React 【実務・中級編】 アクションオブジェクトの設計とペイロードの受け渡し – React実践ガイド
こんにちは。君もそろそろ、実務で「`useState`の海」に溺れかけ、コードが肥大化して夜中に冷や汗をかくフェーズを抜け出したい頃なんじゃないかな。よくあるんだよ、チュートリアルを卒業した中級エンジニアが、いざ現場の複雑なフォームや非同期...
React 【実務・中級編】 useReducerの基本構文とdispatchの役割 – React実践ガイド
こんにちは。毎日チケットを消化しながら「また`useState`の値が古い……？」とデバッガーの前で頭を抱えていないかい？中級の壁を突破してシニアの領域に踏み込もうとしている君なら、フォームの入力値が複雑に入り組んだり、非同期処理の絡む複雑...