React HooksのuseState、useRef

React Hooks は React 16.8 で導入された新機能で、クラスコンポーネントを作成せずに関数コンポーネントで状態やその他の React 機能を使用できるようにします。一般的に使用される React フックの 2 つは useState と useRef です。

useState は、機能コンポーネントの状態を宣言および管理するために使用される関数です。初期状態値をパラメータとして受け取り、現在の状態値と更新された状態値を含む配列を返します。割り当てを分割することで、状態を簡単に取得および更新できます。

たとえば、関数コンポーネントで useState を使用してカウンターを作成できます。

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

上の例では、useState を使用して count という状態を宣言し、その初期値を 0 に設定します。また、カウントステータスを更新するための setCount という関数も宣言します。ボタンがクリックされると、increment 関数を呼び出してカウントステータス値を 1 増やし、setCount 関数を通じてカウント値を更新します。

useRef は、機能コンポーネント内で変更可能な参照を作成できるようにする別の React フックです。useRef は、コンポーネントの存続期間を通じて変更されない、変更可能な ref オブジェクトを返します。

一般的な使用例は、必要に応じて DOM 要素のプロパティとメソッドにアクセスするために、ref オブジェクトを DOM 要素にバインドすることです。

たとえば、useRef を使用して入力ボックスの値を取得できます。

import React, { useRef } from 'react';

function Input() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Show Value</button>
    </div>
  );
}

上の例では、useRef を使用して inputRef という名前の参照を作成しました。次に、inputRef 参照をテキスト入力ボックスの ref 属性に渡して、DOM ノードを inputRef に関連付けます。

ボタンがクリックされると、inputRef.current.value を通じて入力ボックスの値を取得し、alert 関数を通じて表示します。inputRef は可変オブジェクトであるため、コンポーネントのライフサイクル全体にわたってその状態を維持でき、コンポーネントが再レンダリングされても変化しません。

要約すると、useState を使用すると、関数コンポーネントで状態を宣言および管理できます。一方、useRef を使用すると、関数コンポーネントで変更可能な参照を作成できます。これら 2 つの React Hook は、状態と DOM 操作を処理するためのより便利で柔軟な方法を提供します。

おすすめ