React

スポンサーリンク
React

【実務・中級編】 派生状態(Derived State)の計算とmemo化 – React実践ガイド

やあ、お疲れ様。最近、コードレビューをしていて「おっ、またやってるな」と気になったことがあるんだ。君たちも、既存のstateから計算できる値をわざわざ別のstateとして持たせて、`useEffect`で同期を取ろうとしたり、更新関数のあと...
React

【実務・中級編】 状態の引き上げ(Lifting State Up)のパターン – React実践ガイド

おい、調子はどうだい?最近、後輩から「親と子でどうやってデータを同期させればいいのか分からなくなりました」「`useState`を使ってるのに値がズレるんです」っていう相談をやたらと受けるんだよね。君も経験があるかもしれない。コンポーネント...
React

【実務・中級編】 状態の局所化(State Colocation)の原則 – React実践ガイド

おい、調子はどうだい?最近、コードレビューをしていて「あー、またやってるな……」と頭を抱えたくなる瞬間があるんだ。何かと言うと、新しく実装した機能のモーダルの開閉フラグや、フォームの一時的な入力値まで、ぜーんぶReduxなりZustandな...
React

【実務・中級編】 状態管理ライブラリの選定基準と棲み分け – React実践ガイド

おい、最近どうだ?「どの状態管理ライブラリを入れるべきか」でチームが二分して、朝会のたびに宗教戦争が勃発してないか?「いや、今時Reduxなんて冗長だろ、全部Zustandでいいじゃん」「いやいや、大規模型ならRedux Toolkitの厳...
React

【実務・中級編】 RecoilのAtomとSelectorの概念 – React実践ガイド

お疲れ。最近、チームのコードレビューをしていて「またここでStateのバグ踏んでるな…」って思うことが増えたんだよね。親コンポーネントから子、孫へとプロパティをバケツリレーさせたり、無理やりContext APIを細分化してパフォーマンスチ...
React

【実務・中級編】 Zustandにおけるセレクターによるレンダリング最適化 – React実践ガイド

やあ、調子はどうだい?Reactでの状態管理、日々の開発で頭を悩ませていないかい?「とりあえず`useState`で全部持って、子コンポーネントにプロパティをバケツリレーしていくうちに、何がなんだかわからなくなった」「グローバルな状態管理を...
React

【実務・中級編】 Zustandによるストアの作成とフックの利用 – React実践ガイド

やあ。今日も元気にコンポーネントの再レンダリングと戦っているかい?フロントエンドをやっていると、一度はこんな悩みにぶつかるはずだ。「おいおい、このコンポーネントのツリー、どこまで深くPropsをバケツリレーしなきゃいけないんだ……?」あるい...
React

【実務・中級編】 カスタムフックにおける依存関係の管理と引数設計 – React実践ガイド

お疲れ。最近、君が書いたカスタムフックのコードをいくつかレビューさせてもらったんだけどさ……いや、動くには動くんだよ。動くにはね。ただ、再レンダリングの嵐が起きたり、古いステートを参照し続ける「古き良きバグ」が潜んでいたりして、夜も眠れなく...
React

【実務・中級編】 カスタムフックへの状態ロジックの抽出と再利用 – React実践ガイド

お疲れ様です。最近、どのコードレビューを見ても「コンポーネントが肥大化して神コンポーネント化している」「似たような非同期データのフェッチ処理があちこちにコピペされている」という技術負債の山に直面していませんか?中級からシニアへとステップアッ...
React

【実務・中級編】 useReducerとuseContextの組み合わせによるグローバル状態管理 – React実践ガイド

やあ。今日も今日とてコンポーネントの海を泳ぎ回っていることだな。「Reduxを入れるほどでもないけれど、`useState`と`prop drilling(バケツリレー)`の嵐でコンポーネントがスパゲッティ化してきた……」中級の壁にぶつかっ...
スポンサーリンク