React 【実務・中級編】 状態管理ロジックのテスト戦略 – React実践ガイド
こんにちは。君もそろそろ「よし、コンポーネントの見た目のテストは書けるようになったぞ。でも、この複雑に絡み合ったカスタムフックやreducerのロジック、どうやって単体テスト書けばいいんだ……？」という壁にぶち当たっている頃じゃないかな。大...
状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）
React React 【実務・中級編】 関数型更新（Functional Updates）の活用 – React実践ガイド
やあ。最近、チームのコードレビューをしていて「またか」と天を仰ぎたくなる瞬間があるんだ。それが今回テーマにする`useState`の非同期バグ、そしてそれを鮮やかに解決する「関数型更新（Functional Updates）」の不徹底による...
React 【実務・中級編】 useStateの遅延初期化（Lazy Initialization） – React実践ガイド
やあ、調子はどうだい？日々、機能開発やコンポーネントのパフォーマンスチューニングに追われてご苦労さま。今日もコードレビューをしていて、ふと気になる書き方を見かけたんだ。おそらく君も、いや、世の中の多くのReact開発者が一度はやってしまいが...
React 【実務・中級編】 不変性を保った状態更新のテクニック – React実践ガイド
こんにちは。現場で日々、複雑なUIと格闘している中級エンジニアの皆さん、調子はどうかな？「よし、APIから取得したユーザーデータの権限を書き換えて、画面に反映させよう！」そう意気込んで `user.role = 'admin'; setUs...
React 【実務・中級編】 状態の同期におけるアンチパターン – React実践ガイド
おい、最近コードレビューしていて「あ、またこれやっちゃってるな…」って思うアンチパターンがあるんだよね。それが、「propsからstateを初期化する」、そして「複数の状態を同期させようとして沼にハマる」というやつだ。中級へのステップアップ...
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を細分化してパフォーマンスチ...