『React Hooks 入門』のサンプルコード集です。
サンプルコードはCodeSandbox上にあるため、各サンプルコードのリンクを記載しています。
- 01-useState の基本的な利用例
- 02-usestate の戻り値である state 更新関数の引数に関数を渡す
- 03-usestate でオブジェクトを扱う
- 04-usestate でオブジェクトを扱っているがコンポーネントが再レンダーされない例
- 05-usestate で配列を扱う
- 06-usestate で配列を扱っているがコンポーネントが再レンダーされない例
- 01-useEffect でコンポーネントがレンダーされる度に副作用を実行させる
- 02-useEffect で副作用を１度だけ実行させる（外部 API からデータを取得する）
- 03-useEffect で副作用に依存する値（クエリ）が更新した時だけ副作用を実行させる（外部 API からデータを取得する）
- 04-useEffect でクリーンアップ（タイマーを削除する処理）を実行させる
- 01-useRef で前回の state の値を保持して要素の出し分けに利用する
- 02-useRef でコンポーネント内の値を更新しつつ、再レンダーを防ぐ
- 03-useRef ではなく、useState で「初回レンダー」の表示を試す
- 04-useRef で DOM を参照する
- 01-React.memo を利用しない場合、親コンポーネントが再レンダーされると、その子コンポーネントも常に再レンダーされる
- 02-React.memo で Child コンポーネントの再レンダーをスキップする
- 03-React.memo でレンダーコストが高いコンポーネントをメモ化する
- 04-React.memo で頻繁に再レンダーされるコンポーネント内の子コンポーネントをメモ化する
- 05-コールバック関数を受け取ったコンポーネントは React.memo を利用しても必ず再レンダーされてしまう
- 06-useCallback でメモ化したコールバック関数を渡し、コンポーネントの再レンダーをスキップする
- 07-React.memo でメモ化をしていないコンポーネントに、メモ化をしたコールバック関数を渡してもコンポーネントは常に再レンダーされる
- 08-メモ化したコールバック関数を、それを生成したコンポーネント自身で利用しても、コンポーネントの再レンダーはスキップできない
- 09-useMemo を利用しない場合、コンポーネントを再レンダーする度に不要な再計算が発生する
- 10-useMemo で不要な再計算をスキップする
- 11-useMemo でコンポーネントの再レンダーをスキップする
- 12-関数コンポーネント内で React.memo を利用してもコンポーネントをメモ化できない
- 01-useReducer の利用例
- 02-useState を利用した場合、state の更新方法の数だけ、コンポーネントに state 更新関数を渡す必要がある
- 03-useReducer を利用した場合、state を更新する窓口は dispatch に集約するため、コンポーネントには dispatch さえ渡せば良い
- 04-dispatch は同一性が保たれるので、useCallback でラップをせずにメモ化したコンポーネントに渡せる
- 05-Counter コンポーネントの再レンダーを防ぐためには、Props として渡す関数を全て useCallback でラップする必要がある
- 01-useContext で、App から見てひ孫にあたる GreatGrandChild コンポーネントから MyContext の値を取得する
- 02-useContext を利用しない場合、App から GreatGrandChildComponent に値を渡すためには Prop drilling を行う必要がある
- 03-複数のコンポーネントで共通利用するデータを Context で扱い、それを useContext で取得する
- 04-Context の更新により不要な再レンダーが発生している例
- 05-Context オブジェクトを分割して、Context の更新による不要な再レンダーを防ぐ
- 06-React.memo を利用して、Context の更新による不要な再レンダーを防ぐ
- 07-useMemo を利用して、Context の更新による不要な再レンダーを防ぐ例
- 08-props.children を利用して Prop drilling 問題を解消する