React Hooksを使ったuseStateの使い方

Reactは、シングルページアプリケーションの構築に向いたJavaScriptライブラリであり、ユーザインタフェースの構築を簡単にするための多くの機能を提供しています。その中でも、React Hooksは、関数コンポーネントで状態を管理するための手段の1つです。

この記事では、React Hooksの1つであるuseStateフックを使用して、状態を管理する方法について説明します。

useStateフックの概要

useStateフックは、関数コンポーネント内で状態を管理するためのフックです。このフックを使用すると、関数コンポーネント内で変数を宣言し、状態を保存することができます。

例えば、以下のようにuseStateフックを使用して、カウンタアプリを作成することができます。

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

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

export default Counter;

この例では、useStateフックを使用して、countという状態を宣言しています。useStateフックは、配列を返し、最初の要素は状態の値、2番目の要素は状態を更新するための関数です。setCount関数は、count状態を更新するために使用されます。

useStateフックの使用例

以下に、useStateフックの使用例を示します。

フォームの入力値を管理する

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  function handleChange(event) {
    setName(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Name: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

この例では、useStateフックを使用して、フォームの入力値を管理しています。name状態は、input要素のvalue属性として使用されます。handleChange関数は、input要素の値が変更されたときに実行され、setName関数を使用して、name状態を更新します。

ページのタイトルを動的に更新する

import React, { useState, useEffect } from 'react';
function App() {
  const [pageTitle, setPageTitle] = useState('My App');

  useEffect(() => {
    document.title = pageTitle;
  }, [pageTitle]);

  function handleButtonClick() {
    setPageTitle('New Title');
  }

  return (
    <div>
      <h1>{pageTitle}</h1>
      <button onClick={handleButtonClick}>Change Title</button>
    </div>
  );
}

export default App;

この例では、useStateフックを使用して、ページのタイトルを管理しています。pageTitle状態は、ページのタイトルに表示されます。useEffectフックを使用して、pageTitleが変更されたときにページのタイトルを更新します。handleButtonClick関数は、pageTitle状態を更新するために使用されます。

まとめ

この記事では、React Hooksの1つであるuseStateフックを使用して、状態を管理する方法について説明しました。useStateフックは、関数コンポーネント内で状態を管理するための強力な手段であり、多くのアプリケーションで使用されています。この記事を参考にして、自分でuseStateフックを使用したアプリケーションを作成してみてください。