【図解】ReactのuseRefとuseStateの違いを理解する

はじめに

業務でuseRefをさわる機会があったのですが、useStateとの違いをイマイチ把握できなかったので、整理しました。

useRefとuseStateの違いまとめ

値更新時のレンダリング有無がポイントのようです。

項目	値の保持	値更新時のレンダリング
useRef	できる	されない
useState	できる	される

具体例

サンプルソースコード

app.js

import "./styles.css";

import * as React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);
  const countRef = React.useRef(0);

  return (
    <div className="App">
      <div>カウント（useState）: {count}</div>
      <button onClick={() => setCount(count + 1)}>
        カウントアップ（useState）
      </button>

      <div>カウント（useRef）: {countRef.current}</div>
      <button onClick={() => countRef.current++}>
        カウントアップ（useRef）
      </button>
    </div>
  );
}

デモ

1. useState用のボタンとuseRef用のボタンを用意
2. useRef用のボタンを3回クリックする
   • 画面描画が行われず、カウントアップしない
3. useState用のボタンを3回クリックする
   • 画面描画が行われ、カウントアップする
   • useRef用の表示もここで初めてレンダリングされて、3回クリックした後の表示となる