React 【実務・中級編】 React Testing Libraryによる状態更新のテスト – React実践ガイド
お疲れ。今日もコードの海に潜ってリファクタリングの息継ぎをしているところか？Reactを触り始めて半年、あるいは数年が経ち、「コンポーネントの分割も、カスタムフックの切り出しも大体できるようになったぜ」という中級エンジニアの君たち。そこでお...
状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）
React React 【実務・中級編】 React DevToolsによる状態のデバッグ – React実践ガイド
やあ、お疲れ。最近、現場で「`useState`の値がどうしても一瞬ズレるんだよね……」とか、「なんでこのタイミングで再レンダリング走っちゃうの？」って頭を抱えている後輩の姿をよく見かける。君も経験があるかもしれないが、非同期の罠にハマった...
React 【実務・中級編】 propsからstateへの同期パターン – React実践ガイド
こんにちは。チームのコードレビューをしていて、一番「うっ……」と絶句する瞬間がいつだか分かるかい？ そう、「親から渡ってきた `props` の値が変わったから、子コンポーネント側で `useState` の初期値を再計算したい」というコー...
React 【実務・中級編】 非同期イベントハンドラ内での状態更新 – React実践ガイド
お疲れ。少し手を止めて、コーヒーでも飲みながら聞いてくれ。君もそろそろ「Reactの基本は一通りマスターした、実務の機能開発も任せてくれ」というフェーズだと思う。だがな、中級の壁として必ず立ちはだかるのが「非同期処理と状態管理の絶妙なズレ」...
React 【実務・中級編】 key属性を利用した状態のリセット – React実践ガイド
やあ、調子はどうだい？最近、コードレビューをしていて「あー、ここでまたあの罠にハマってるな」って思うことが多いんだよね。そう、「モーダルを閉じても入力フォームの値が残っちゃうんだよね…どうリセットすればいい？」っていう相談や実装ミス。君も一...
React 【実務・中級編】 useStateとReact.memoの連携 – React実践ガイド
こんにちは。現場で日々、無限ループするuseEffectや、何の意味もない再レンダリングの山と格闘しているフロントエンドエンジニアの皆さん、お疲れ様です。今回は、Reactのパフォーマンスチューニングにおいて「避けては通れない壁」である、`...
React 【実務・中級編】 useStateとuseReducerの使い分け基準 – React実践ガイド
やあ、調子はどうだい？最近、コードレビューをしていて一番よく見かける「モヤッとするアンチパターン」について話そうか。新規機能の初期段階では `useState` でサクッと作っていたはずの状態が、要件の追加やバグ修正の波に揉まれるうちに、気...
React 【実務・中級編】 状態の持ち上げ（Lifting State Up） – React実践ガイド
お疲れ。最近、君が書いたコンポーネントのPRを見たんだけどさ……子コンポーネント同士でデータを共有したいがために、無理やりReduxを持ち出したり、無駄にContext APIを乱用して再レンダリングの嵐を起こしていた箇所があったよね。気持...
React 【実務・中級編】 TypeScriptにおけるuseStateの型推論とジェネリクス – React実践ガイド
やあ。今日も元気にコンポーネントをリファクタリングしているかい？フロントエンドの現場にいると、TypeScriptとReactの組み合わせはもはや「息をするのと同じ」くらい当たり前になったよね。でも、ちょっと待ってほしい。君が何気なく書いて...
React 【実務・中級編】 Strict Modeにおける二重レンダリングとuseState – React実践ガイド
こんにちは。プロダクトの規模が膨らみ、チームメンバーのレビューに追われる日々を送るシニアエンジニアの私だ。さて、君も最近こんな経験をしていないかい？「あれ？ 開発環境でアプリを立ち上げたら、`useEffect` の中身が謎に2回走るんだけ...