【React.js】useState,useRef,useEffectの使い分け簡易まとめ

久しぶりにReactを触ると、どのhooksがどんな機能か忘れてしまうのでまとめ。

簡易的にしかまとめていないので、詳細は公式サイトなどを見てほしい。

useState
useEffect
useRef
まとめ

useState

（個人的に）一番基本的な状態管理のためのhooks。
アプリケーションで一番よく利用される状態管理方法のはず。

記法は以下の通り。

const [状態値, 更新用関数] = useState(初期値);

サンプルプログラムではよくカウンターが実装される。

// ボタンを押すと1ずつインクリメントされるReactコンポーネント
const SampleComponent = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <p>count: {count}</p>
    <button onClick={() => setCount(count + 1)}>+1</button>
  )
}

useEffect

データの取得
コンポーネントが更新される度に何か処理する

というケースに利用する。実行タイミングはレンダリング後。

useEffect(() => {
  conosle.log("レンダリング後に呼ばれる処理");
});

また、第二引数に変数の配列を指定することで、「レンダリング後+変数が変更されるたび」に呼び出すこともできる。

useEffect(() => {
  conosle.log(count);
}, [count]); // 初回レンダリング時とcountの中身が変わるたびに呼ばれる

useRef

クラスでいうところのインスタンス変数のように扱うことができる。

主な用途としては、DOMにアクセスする場合。

const SampleComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFocusButton = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  return (
    <>
      {/* DOMに変更があるたび、その値をinputRefに設定する */}
      <input type="text" ref={inputRef} />
      <button onClick={handleFocusButton}>focus</button>
    </>
  );
};

まとめ

ざっくり以下のように使い分ければOK。
上から順に検討していき、不適切であれば次の選択肢を検討する。

useState：普通に状態を変数として持ちたい時
useEffect：初回レンダリング時に何か行いたい時
useRef：DOMにアクセスしたい時