Hooks

こんにちは、かつコーチです。前回は、カスタムフックを自作してロジックを再利用する方法を解説しました。今回は、状態管理の話をもう一段階深く掘り下げます。useState で状態を管理していると、フォームの入力値・エラー内容・送信中フラグなど、...

こんにちは、かつコーチです。前回は「useCallbackで関数の再生成を防ぐ」を解説しました。useState や useEffect、useRef と一通り基本のフックを見てきたので、今回はそれらを組み合わせてカスタムフックを自作する方...

こんにちは、かつコーチです。前回は「useMemoで無駄な再計算を防ぐ」を解説しました。今回はそのペアとも言える useCallback を扱います。「関数もメモ化できるの？」と思う人も多いと思いますが、useMemo の考え方が分かってい...

こんにちは、かつコーチです。前回は「useContextでProps drillingを解消する」を解説しました。今回は、パフォーマンスチューニングの入り口として避けて通れない useMemo を扱います。「なぜ画面がカクつくのか」「どこを...

こんにちは、かつコーチです。前回は「useRefの使い方：DOM参照と値の保持」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずと言っていいほど直面する「Props drilling」問題と、それを解消する useCont...

こんにちは、かつコーチです。前回は「useEffectの依存配列でハマらないためのコツ」を解説しました。今回は、useEffectとセットでよく登場する useRef を扱います。「DOM要素を直接触りたいとき」「再レンダリングを起こさずに...

こんにちは、かつコーチです。前回はuseEffectの基本と、副作用処理という考え方について解説しました。今回はその中でも特に多くの人がつまずく「依存配列」に絞って、より実践的な落とし穴と対処法を解説していきます。依存配列の基本ルールをおさ...

こんにちは、かつコーチです。前回はuseStateでオブジェクトや配列を安全に更新する方法を解説しました。今回は、Reactの中でも特につまずきやすいと言われるuseEffectを扱います。「なんとなく動いているけど、実は理解できていない」...

こんにちは、かつコーチです。前回は親子コンポーネント間でのデータの受け渡し方を解説しました。useState自体は入門段階でも触れる機能ですが、文字列や数値ではなく「オブジェクト」や「配列」を扱い始めると、急につまずく人が多くなります。今回...