React useState：要約

過去数か月の間、私はReactに飛び込み、いくつかの簡単なアプリケーションを構築してきました。私が消化するのに苦労してきた1つの概念は、ReactStateの概念です。私は最近、それを明確に説明する優れたチュートリアル（私は強くお勧めします）に出くわしました。この短い記事では、チュートリアルに従って学んだ最も重要な概念を要約して、他の人にも役立つようにします:-)

Reactの状態とは何ですか？コンポーネントの状態は、特定の時間にコンポーネント内で使用およびレンダリングされているデータです。

以下のコードでは、変数（iceCreamFlavor）を作成し、それに初期値「chocolate」を割り当てます。この変数は、中括弧{iceCreamFlavor}を使用してコンポーネントテンプレート内にレンダリングされます。「Clickme」ボタンをクリックすると、アイスクリームのフレーバーが「チョコレート」から「ストロベリー」に変わると予想されます…結局のところ、handleClick関数は…

const MyComponent = () => {
let iceCreamFlavor = "chocolate";
const handleClick = () => {
iceCreamFlavor = "strawberry";
};
return (
<div className="container-style">
<h2>Ice cream flavor</h2>
<p>{iceCreamFlavor}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};

値は変更されますが、コンポーネントにはレンダリングされません。なぜそうなのですか？

これは、iceCreamFlavorがリアクティブ変数ではないため、その変更によってReactがコンポーネントテンプレートを再レンダリングしないためです。

値をリアクティブにするには、特別なタイプの関数であるuseStateフックを使用する必要があります。

書くことによって：

useState("chocolate")

「チョコレート」は、中括弧を使用してコンポーネント内にレンダリングされる初期値です。しかし、フックはまだ完成していません。それを完成させるには、次のものも必要です。

1. この値を格納するための「場所」。この場合、「iceCreamFlavor」を使用します（この変数名は任意であることに注意してください）。
2. 値「iceCreamFlavor」（この場合は「setIceCreamFlavor」）の更新を担当する関数。通常、関数名は「set」で始まり、その後に更新するものの名​​前が続きます。

const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)

const Home = () => {
  const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)
  
  const handleClick = () => {
    setIceCreamFlavor("strawberry");
  };
return (
 <div className="container-style">
 <h2>Ice cream flavor</h2>
 <p>{iceCreamFlavor}</p>
 <button onClick={handleClick}>Click me</button>
 </div>
 );
};

1. handleClick関数が起動されます。
2. setIceCreamFlavorも起動されます。これにより、アイスクリームのフレーバーが「チョコレート」から「ストロベリー」に変更され、テンプレートの再レンダリングもトリガーされます。

このフックに関するいくつかのサイドノート：

• useStateは、1つのコンポーネントで何度でも使用できます。
• このフックを使用するには、コンポーネントの最初に次のようにインポートする必要があります。

import { useState } from “react”;