ShinCode_Camp

本講座で学べる事

そもそもHooksとは何か？

講座用にReact環境をセットアップしよう

useState()を使わないstate管理をやってみよう

useState()

stateの変更が即時反映されない理由

状態更新関数の使い方

Reactがレンダリングするタイミングを理解しよう

コンソールに2度ログが出てくる理由(React Strict Mode)

onChangeトリガーを使ったinput値の状態更新

オブジェクトや配列のstateの更新

スプレッド構文を使ったstateの状態更新

イミュータブルとミュータブルな操作の違い

【補足】onClickにおける関数の呼び出し方の違い

【補足】ReactがDOMにコミットするまでの流れ

【補足】仮想DOMの差分比較=コンポーネントのレンダリング

useEffect()

ブラウザイベントのリッスン(外部システムがDOMの場合)

クリーンアップ関数の意味と実装方法

useEffectを使ったデータフェッチング

依存配列を指定してEffect発火条件を変更しよう

クリーンアップで競合状態を解決しよう

useEffect内で発生するstate更新の無限ループに気を付けよう

【発展】カスタムフックスにエフェクトをラップする

【発展】useSWR()を使ったキャッシュデータフェッチング

useRef()

useRefでDOMを取得して画像スクロールを実装してみよう

useRef()を使って余計な再レンダリングを防ぐ方法

forwardRef()で別のコンポーネントの DOM ノードにアクセスする

useContext()

認証プロバイダーとしてのuseContextの使い方

user, login, logoutを全体のコンポーネントへ提供しよう

AuthContext.Providerで起こるTypescriptエラーを解決しよう

アプリケーション全体でユーザー情報と認証機能を利用してみよう

【発展】Provider内の関数や値のメモ化

不要な再レンダリングが起きるタイミング

React.memo()

何でもかんでもメモ化する施策は得策ではない

React Developer Toolsの導入とその使い方

レンダリングのタイミングを推測して確認してみよう

useCallback()

パフォーマンスチューニングのためのリファクタリング

useMemo()