ReactのuseStateを徹底解説！具体例でわかりやすく

JavaScript
2023.10.15
スポンサーリンク

こんにちは。

今回は、Reactの基本中の基本、useStateについて詳しく解説していきます。この記事を読むことで、useStateの使い方から頻出の使用例まで、しっかりと理解できるでしょう。

useStateの具体例４選

まず、useStateを利用した具体的なコードの例を示します。

カウンターの例

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増加</button>
      <button onClick={() => setCount(count - 1)}>減少</button>
    </div>
  );
}

テキスト入力の例

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>入力されたテキスト: {text}</p>
    </div>
  );
}

ToDoリストの例

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  return (
    <div>
      <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

複数の状態を持つ例

import React, { useState } from 'react';

function MultiState() {
  const [name, setName] = useState('名無し');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="number" value={age} onChange={(e) => setAge(e.target.value)} />
      <p>名前: {name}, 年齢: {age}</p>
    </div>
  );
}

useStateとは？

useStateはReactのフック（Hooks）の一つで、コンポーネントの状態（state）を管理するためのものです。

基本的な使い方

状態の宣言: useStateを使って状態を宣言します。

const [state, setState] = useState(initialState); 
// const [現在の状態, 更新する関数] = useState(初期値);

ここでstateは現在の状態、setStateは状態を更新する関数、initialStateは初期値です。

状態の更新: setState関数を使って状態を更新します。

 setState(newState); 
// 更新する関数(新しい値);

具体例

const [message, setMessage] = useState("Hello, John!");
const [likes, setLikes] = useState(0);
const [isPublished, setIsPublished] = useState(false);

コンポーネントの再描画（レンダリング）

コンポーネントが再描画されるタイミングは主に2つです。

  1. propsの変更: 親コンポーネントから渡されたpropsが変更された場合。
  2. stateの変更: コンポーネント内部のstateが変更された場合。

stateとpropsの違い

  • props: 親コンポーネントから子コンポーネントへ渡される値。引数のようなものです。
  • state: コンポーネント内部で宣言・制御される値。

useStateの頻出3選

1. テキスト入力フォーム

const TextInput = () => {
  const [name, setName] = useState("");
  const handleName = (event) => {
    setName(event.target.value);
  };
  return (
    <input type="text" value={name} onChange={(event) => handleName(event)} />
  );
};

2. カウンター機能（prevStateの活用）

const Counter = () => {
  const [count, setCount] = useState(0);
  const countUP = () => {
    setCount(prevState => prevState + 1);
  }
  return (
    <div>
      <div>現在のカウント: {count}</div>
      <button onClick={countUP}>up</button>
    </div>
  );
};

3. ON/OFFを切り替えるボタン

const ToggleButton = () => {
  const [open, setOpen] = useState(false);
  const toggle = () => setOpen((prevState) => !prevState);
  return <button onClick={toggle}>{open ? 'OPEN': 'CLOSE'}</button>;
};

以上がuseStateの基本的な使い方と頻出の使用例です。

関数をpropsとして渡す際の注意点

Reactでよくあるパターンとして、関数をpropsとして子コンポーネントに渡す場合があります。しかし、その際にはいくつか注意が必要です。

正しい関数の渡し方

関数をそのまま渡す

<PublishButton 
    isPublished={isPublished} 
    onClick={publishArticle} 
/>

関数をラップして渡す

<PublishButton 
    isPublished={isPublished} 
    onClick={() => publishArticle()} 
/>

間違った関数の渡し方

  • 関数の末尾に()をつける このような書き方は避けましょう。関数が実行されるたびに新しい関数が生成され、無限レンダリングが発生する可能性があります。 
<PublishButton 
    isPublished={isPublished} 
    onClick={publishArticle()} 
/>

prevStateの重要性

useStateの更新関数には特別なprevStateという引数があります。これは更新前のstateを指します。

const countUP = () => {
  setCount(prevState => prevState + 1);
}

このprevStateを使う理由は、JavaScriptが非同期処理であるため、重い処理が前にかかれていると、状態が反映されない可能性があるからです。

まとめ

  • useStateはReactの基本的なフックで、コンポーネントの状態を管理します。
  • コンポーネントはpropsやstateが変更されたときに再描画されます。
  • 関数をpropsとして渡す際には注意が必要です。
  • prevStateは非同期処理に対応するために重要です。

以上がuseStateに関する詳細な解説です。この記事があなたのReact開発に役立つことを心より願っています。

スポンサーリンク