● 1. React hooks / useState()

useState() とは

「状態を持つ変数」と「更新する関数」を管理するReactフックです。
「状態を持つ変数」の値が変わると再レンダリングが起こります。

useState の宣言方法

import { useState } from "react";

    //　const [変数, 変数を更新するための関数（setter アクセサ）] = useState(状態の初期値);
    // （例）変数 email / 更新する関数 setEmail() を宣言する
    const [email, setEmail] = useState("");

        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="Email..."
        />

オブジェクトや配列に対して、useStateをどう使うか

const [member, setMember] = useState({ name: "", part: "" });

引用 : https://bit.ly/3nG3WHa

● 2. React hooks / useEffect()

useEffect() とは

useEffectを使うと、useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。（ = componentDidMount() ）
また便利なことに、useStateフックはマウント解除にも使用できます。( =componentWillUnmount()  )

useState の宣言方法

// 第1引数に「実行させたい副作用関数」を記述
// 第2引数に「副作用関数の実行タイミングを制御する依存データ」を記述
useEffect( [副作用関数], [依存する変数の配列]) 

useEffect(() => {
    console.log('useEffectが実行されました');
},[]);

// 第2引数を省略するとコンポーネントがレンダリングされるたび毎回実行されます。
// 第2引数に空の配列 [] を記述すると初回レンダリングのみ実行されます。

マウント解除時

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h1>Bye, World</h1>;
};

● 3. React hooks / useContext()

useContext() とは

propsバケツリレーを使用することなく高い窓にまたがったコンポーネントで簡単にデータにアクセスするために使用します

● 4. React hooks / useReducer()

useReducer() とは

引用 : https://bit.ly/3uzQaJb

useReducer で setState 関連のロジックを閉じ込める
deleteItem メソッドは、配列のうち該当する index の item を削除するメソッドであるが、こういったロジックをどこに書くかをかなり悩んできた。結論としては useReducer 内にロジックを保持するパターンが、一番疎結合である。

引用: https://bit.ly/3BeyRQw

useReducerというAPIも登場しています。 useReducerはReduxにおけるReducerのような振る舞いをします。 

引用: https://bit.ly/2Yb49ZK

useReducer が生きるのは、複数の関連したステート、つまりオブジェクトをステートとして扱うときです。

useReducer は useState と似ている。
useState では「数値」、「文字列」、「論理値」を扱うことができるがそれを拡張して
useReducerでは「配列」、「オブジェクト」を扱えるようにする

● 5. React hooks / useCallback

useReducer() とは

useEffect の高速化のための手法
useCallbackはパフォーマンス向上のためのフックで、メモ化したコールバック関数を返します。
useEffectと同じように、依存配列(=[deps] コールバック関数が依存している要素が格納された配列)の要素のいずれかが変化した場合のみ、メモ化した値を再計算します。

● 6. React hooks / useMemo

● 7. React hooks / useRef

useRef() とは

関数コンポーネントでは、Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行います。

useStateを利用している場合はstateの変更される度にコンポーネントの再レンダリングが発生しますが、
useRefは値が変更になっても、コンポーネントの再レンダリングは発生しません。

コンポーネントの再レンダリングはしたくないけど、内部に保持している値だけを更新したい場合は、保持したい値をuseStateではなく、useRefを利用するのが良さそうです。

引用: https://bit.ly/3zXdqC2