ReactのuseRefを再描画がかからないState管理として利用する

React HooksではuseStateなどで定義された値が更新された場合にそのコンポーネントの再描画を行う。

以下のコンポーネントではaddボタンを押されるたびにuseStateで管理しているcountが更新されAppコンポーネントの再描画が行われconsole上に「render」の文字列が出力されます。

export default function App() {
  const [count, changeCount] = useState(0);
  console.log("render");
  return (
    <div className="App">
      <input
        type="button"
        value="add"
        onClick={() => {
          console.log(count);
          changeCount(count + 1);
        }}
      />
    </div>
  );
}

これはReact上のエコシステムとして仕方ないですが表示に関係ない内部的なフラグの変化など再描画が望ましくないケースもあり、そういったケースではuseStateの代わりにuseRefを利用することで再描画されない(LifeCycleに影響を与えない)Stateを作成することができます。

useRefは以下のように利用して、参照する場合はcount.currentを、変更する場合はcount.currentを直接変更します。

export default function App() {
  const count = useRef(0);
  console.log("render");
  return (
    <div className="App">
      <input
        type="button"
        value="add"
        onClick={() => {
          console.log(count.current);
          count.current += 1;
        }}
      />
    </div>
  );
}

スポンサードリンク

«TypeScriptのインデックス シグネチャでオブジェクトのキーの型を指定する | メイン | もう、SP用のWebデザインを倍の解像度で作るのをやめよう»