10.2. useState

はじめにこのセクションでは、Reactフックの基本的な部分であるuseStateフックについて詳しく見ていきましょう。useStateを使うと、関数コンポーネントで状態を簡単に管理できます。GeekとGalの会話に沿って学んでいきましょう。

useStateフックは、関数コンポーネントで状態を管理するのにめちゃくちゃ便利なツールなのよ！

それはいいね！どうやって動くの？

超簡単！useStateは、現在の状態値とそれを更新する関数のペアを返すの。この関数を呼び出して新しい状態を設定できるのよ！

useStateの使い方

useStateを使うには、Reactからインポートして、関数コンポーネントの中で呼び出す必要があるわ。こんな感じになるの：

import React, { useState } from 'react';

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

なるほど！だから、ReactからuseStateをインポートして、関数コンポーネントの中で呼び出すんだね。でも、その [count, setCount] って何？

いい質問ね！これは配列の分割代入と呼ばれるものよ。useStateフックは、現在の状態値とそれを更新する関数の2つの要素を持つ配列を返すの。その2つの値を別々に取得するために、配列を分割代入しているの。

状態の更新

それでは、useStateが返す関数を使って状態を更新する方法を見てみましょう！

import React, { useState } from 'react';

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

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

ああ、だから setCount 関数を使って状態を更新し、ReactがUIの更新を面倒見るんだね！

その通り！useStateフックを使うことで、クラスコンポーネントやその複雑さを必要とせずに、関数コンポーネントで状態を簡単に管理できるのよ！

おわりに useStateフックを使うことで、関数コンポーネントで状態をシンプルかつ効果的に管理できます。現在の状態値とそれを更新する関数からなるペアを返します。useStateを使えば、関数コンポーネントをより強力で使いやすくできるわ！😃