React の useState フックでコールバックを使用する

React で useState を導入し、useState フックでコールバックを使用します。

React の useState

useState 関数は、React パッケージからインポートできる組み込みのフックであり、機能コンポーネントに状態を追加できます。

useState は React 16.7 から導入されました。関数コンポーネント内で useState フックを使用すると、クラスコンポーネントに変更せずに状態の一部を作成できます。

useState フックでコールバックを使用するには、useEffect を使用できます。

例を見てみましょう。ボタンを作成します。ボタンクリックページのタイトルが変更されます。

まず、export default function App() 内の app.js で、React useState を使用して 2つの定数 click と setClick を宣言します。

# react
  const [click, setClick] = React.useState(0);

useEffect を使用して、click の値をチェックする関数を作成します。click 値が 1 以上の場合、document.title を Button clicked に変更し、click の値が 1 より小さければ、document.title を No button clicked に変更します。

# react
React.useEffect(() => {
    if (click >= 1) {
      document.title = "Button Clicked!";
    } else {
      document.title = "No Button Clicked!";
    }
  }, [click]);

ここで、レイアウトを返します。

# react
<div className="App">
      <h1>Press button to see changes</h1>
      <button type="button" onClick={() => setClick(click + 1)}>
        Change Document Title
      </button>
    </div>

出力：

上記の出力に見られるように、ページのタイトルには No button clicked と表示されています。ボタンをクリックして確認しましょう。

出力：