[React]Hooksの備忘録

投稿理由

React Hooksの復習して理解を深める為
随時更新していきます。

useState

hooksの中で一番使われている
コンポーネントの値を保持したり、更新するために使う
使用例：　入力フォームなど

const [状態変数, 状態を変更するための関数] = useState(状態の初期値);

useEffect

コンポーネントの副作用を制御する為につかう
副作用とは、UI構築以外の処理のことをいいます。
使用例：外部APIからデータを取得する

useEffect(() => {
  // 副作用処理を記述
return () => {
  // クリーンアップ処理を記述
};
}, [副作用関数の実行タイミングを制御する依存配列]);

useContext

複数のコンポーネント間で共通して利用したいデータを管理する
使用例：認証情報

const コンテキストから値を受け取る変数 = useContext(コンテキストオブジェクト);

useRef

refオブジェクトを生成するときに使う
再レンダリングを防ぐ
使用例：ストップウォッチ

const 参照オブジェクト = useRef(初期値) 

useMemo

関数が出力した値を保持する
使用例：パフォーマンス最適化の時のみ

const メモ化のための関数 = (props) => {
  const 結果を保存するための変数 = useMemo(() => メモ化の対象となる関数(props.name), [props.name])
 
  return <div>結果を保存するための変数</div>

useCallback

関数をメモ化するときに使う
使用例：子コンポーネントのpropsに関数を渡す時

useCallback(メモ化する対象の関数, [依存配列]);

useReducer

複雑なstateを管理する為
使用例：複数の値のstateを更新するとき

const [state, reducerを実行する呼び出し関数] = useReducer(stateを更新する関数,初期値)

参考