useState vs useRef: 迷ったらコレ！それぞれの役割と使い分け

React: useState と useRef の違い

useState は、コンポーネントの状態を管理するために使用されます。状態は、時間とともに変化するデータであり、コンポーネントのレンダリングに影響を与えます。

useRef は、DOM 要素への参照や、コンポーネント内で状態を保持するために使用されます。参照は、DOM 要素への直接的なアクセスを提供し、状態は、コンポーネントの再レンダリングをトリガーせずに保持することができます。

使い分けるポイント

• useRef を使用するケース:
  • DOM 要素への直接的なアクセスが必要な場合
  • コンポーネント内で状態を保持したいが、その状態がコンポーネントの再レンダリングをトリガーする必要がない場合
  • 例: フォームの入力フィールドへのフォーカス、アニメーションの実行など
• useState を使用するケース:
  • コンポーネントの状態を管理したい場合
  • 状態の変化がコンポーネントのレンダリングに影響を与える場合
  • 例: 入力フォームの値、タイマーのカウントダウンなど

useState と useRef の比較表

具体的なコード例

useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

useRef

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>フォーカス</button>
    </div>
  );
}

useStateを使ったカウンター

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

useRefを使ったフォーカス

この例では、useRefフックを使用して、ボタンをクリックすると入力フィールドにフォーカスを設定します。

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>フォーカス</button>
    </div>
  );
}

useRefを使ってDOM要素にアクセス

import React, { useRef } from 'react';

function ButtonColorChange() {
  const buttonRef = useRef(null);

  const changeColor = () => {
    buttonRef.current.style.backgroundColor = 'red';
  };

  return (
    <div>
      <button ref={buttonRef} onClick={changeColor}>ボタンの色を変更</button>
    </div>
  );
}

• MobX: 状態管理のための別のライブラリです。
• Redux: アプリケーション全体の状態を管理するためのライブラリです。
• useReducer: 複雑な状態ロジックを管理するために使用されます。
• useContext: コンポーネントツリー全体で共有される状態を管理するために使用されます。

これらの方法はそれぞれ異なるユースケースに適しています。状況に応じて適切な方法を選択することが重要です。

具体的なユースケース

• MobX:
  • 反応性の高い状態管理が必要な場合
• Redux:
• useReducer:
  • フォームデータやゲームの状態など、複雑な状態ロジックを管理する場合
  • 例: ショッピングカート、Todoリストなど
• useContext:
  • ユーザー設定やテーマ設定など、アプリケーション全体で共有される状態を管理する場合
  • 例: ログイン状態、ダークモード設定など