React フック - PUROGU LADESU

関数コンポーネントに機能を追加するための仕組み

コンポーネントを描画、破棄するタイミングで何らかの処理を実行させる
フックは必ず関数コンポーネントのトップレベルで呼び出すこと。
ループ、条件分岐、入れ子関数では機能しません。

useEffectの中で値を更新すると再描画されるので無限ループになってしまうので注意

const t = setInterval(() => {
  // タイマー設定時のcountを保持してしまい動かない
  // setCount(count + 1);
  setCount((c) => c + 1);

ターゲットになる変数を引数で指定すると、その変数の更新時のみ発動する。
第２引数がない場合、すべての変数更新時に発動する。
[]空配列を指定すると、更新時はなにもせず初回だけ発動する。

useEffect(() => {
  console.log("クリック")
  return () => {
    アンマウント時
  }
}, [count]);

stateと更新処理を一箇所にまとめる。
単純な更新ならuseStateで十分なので、複雑な更新の場合に利用する。

引数としてstate, actionを受け取る
dispatchで指定するactionのタイプによって処理が変わる
更新したstateを返す

const [state, dispatch] = useReducer(
  (state, action) => {
    // action.typeによるswitch処理でstateを更新
    // stateを返す
  },
  {stateのデフォルト値}
)

dispatchによりstateを更新する。関数でラップしてコンポーネントから利用する。
dispatch({ type: "PLUS", amount: 1 });
useReducerでactionのtypeに応じてstate更新がなされる

親子コンポーネントでの情報伝達のバケツリレーを解消する
上位コンポーネントで用意された値（Provide）を、下位コンポーネントで参照（Consume）。
stateをグローバルにした感じ。

コンテキストを提供するコンポーネントをProviderという
useContext経由でコンテキスト取得するコンポーネントをConsumerという

createContextして、valueに値をセットする

export const MyAppContext = createContext();
<MyAppContext.Provider value={c}>

Providerを入れ子にすれば複数利用できる

exportしたcreateContextを配下のコンポーネントで取り出す

const [count, setCount] = useContext(MyAppContext);

コンテキストにはコンテンツは設置せず、useStateとprops.childrenを置く
トップレベルコンポーネントにはproviderを設置。
配下のコンポーネントではcontextを取得。

コンテキストの配下に無いものが更新されても、コンテキストに依存するコンポーネントが再描画されてしまう。
useMemoを使いキャッシングする。依存する変数を指定する。

再利用可能なロジックを切り出し、コンポーネントから呼び出して使う。

名前はuseXXXXとする
戻り地はstateや定義した関数など。