useStateとuseRefの違いとは？

ReactにおけるuseStateとuseRefは、コンポーネント内でデータを扱うためのフックですが、その用途と挙動には重要な違いがあります。この記事では、それぞれのフックがどのように機能し、どのような場面で使い分けるべきかを解説します。また、具体的なコード例を通して、両者の違いを明確にします。

useState

useStateはReactの状態管理フックです。主にコンポーネントのレンダリング状態を保持し、更新するために使用されます。useStateを使うことで、コンポーネント内で扱うデータが更新されるたびに、そのコンポーネントは再レンダリングされます。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この例では、countがクリックごとに更新されるたびに、Counterコンポーネントが再レンダリングされます。

useRef

useRefは、Reactの参照フックです。DOM要素や任意の値の“参照”を保持するために使われますが、この値が変更されてもコンポーネントの再レンダリングは発生しません。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current`は指定されたDOM要素を指します。
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

この例では、ボタンをクリックするとテキスト入力フィールドにフォーカスが当てられますが、これによってコンポーネントが再レンダリングされることはありません。

useStateとuseRefの違い

• 再レンダリングの有無: useStateを使って状態が更新されると、コンポーネントは再レンダリングされます。一方、useRefで参照される値が変更されても、再レンダリングは発生しません。
• 用途: useStateは主にデータの状態管理に使われ、useRefはDOMの参照や再レンダリングを引き起こさない値（例えば、タイマーIDなど）の保持に使われます。