【React】学習メモ：useStateってなに？

useStateってなに？

コンポーネントが持っている「特別な記憶」を管理するためのものです。

たとえば、画面に表示される数字や、オン・オフの状態、入力された文字などをコンポーネントに記憶させたいときに使います。

const [state, setState] = useState(initialState);

• state:変更したい値
• setState:stateを変更するための処理

このようなコードを分割代入を使って上記ののようなコードに短縮しています。

// useStateの呼び出し
const stateArray = useState(0);

// 分割代入を使って変数に格納
const count = stateArray[0];
const setCount = stateArray[1];

分割代入（Destructuring Assignment）
分割代入はJavaScriptの便利な機能の一つです。

配列やオブジェクトから要素を取り出して、新しい変数に代入することができます。　
useStateが返す配列の2つの要素を、それぞれstateとsetStateという変数に簡単に代入するために使われています。

例：

const fruits = ['apple', 'banana'];

// 1つ目の要素をfirstFruitに、2つ目の要素をsecondFruitに代入
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit);  // 'apple'
console.log(secondFruit); // 'banana'

例：ボタンを押すと数字が増える

import React, { useState } from 'react';

function Counter() {
  // ① useStateを使って「特別な記憶」を用意する
  //    count: 今の数字（状態）
  //    setCount: 数字を更新するための関数
  const [count, setCount] = useState(0);

  // ② ボタンがクリックされた時に実行する関数
  const handleClick = () => {
    // ③ setCountを使って、countの値を1増やす
    setCount(count + 1);
  };

  return (
    <div>
      {/* ④ countの値を画面に表示 */}
      <p>クリックされた回数: {count}回</p>
      
      {/* ⑤ ボタンがクリックされたら、handleClick関数を実行する */}
      <button onClick={handleClick}>
        カウントアップ！
      </button>
    </div>
  );
}

export default Counter;

よく使われるディレクトリ

src/components/ディレクトリ

コンポーネントは、

• ボタンを押される
• フォームに文字が入力される

といったユーザーの行動によって状態が変化することが多いためです。
例えば、クリックするとカウンターが増えるボタンや、入力内容によって表示が変わるフォームなど、コンポーネント単体で完結する機能にuseStateが使われます。
大体このcomponentsディレクトリで使用される印象です。

src/hooks/ ディレクトリ

複数のコンポーネントで共通のロジック（例: APIからデータを取得する、特定のUIの状態を管理する）を再利用したい場合に、カスタムフックとしてuseStateを切り出すことがあります。これにより、コードの重複を防ぎ、管理しやすくなります。検索条件を入力して検索するような処理の時に使用したりします。

まとめ

• useStateは「状態（値）と、それを更新する関数」をセットで返すフック

• [state, setState] のように分割代入して使う

• 状態はコンポーネントが再レンダーされても記憶される