useState は、2 つの変数 (state、setState) を含む配列を返すことによって、コンポーネントに状態を追加できるようにする React フックです。現在の状態と、呼び出されたときにセッター関数となる関数。これは、文字列、数値、ブール値、配列、オブジェクトなど、アプリケーションで追跡する必要があるデータまたはプロパティを追跡するために使用できます。
例：

const [state, setState] = useState();

簡単に言うと、状態はいずれかの時点で変化し、更新する必要があるため、「setState」は状態を更新し、時間の経過とともにコンポーネントの再レンダリングをトリガーします。

さらに、useState はオブジェクトを含むあらゆる種類の JavaScript 値を保持できます。常に心に留めておくべきことは、React 状態にあるオブジェクトを直接変更しないでください。まず、新しいものを作成するか、既存のコピーを作成してから、新しいコピーに State を設定する必要があります。例えば：

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

useState を React コンポーネントで使用するには、まず 2 つの異なる方法でコンポーネントのページの上部に次のコードを記述して、React から useState をインポートする必要があります。どちらも機能します。完璧に毒を選べるように。

import React from 'react'; 
import {useState} from 'react';

または 1 行で書くこともできます

import React, {useState} from 'react';

React フック useState は、コンポーネントのトップレベルまたはカスタム フック内で呼び出すことができますが、ループや条件内では呼び出すことができません。

const [initialState, setInitialState] = useState();

initialState は最初のレンダリング中にのみ使用され、後続のレンダリングでは無視されます。
InitialState 関数は setInitialState 関数に渡され、前の状態を引数として受け取り、newState.

さらに、私の意見では、React でフックを使用できる場所と使用できない場所について特別なルールはありません。もちろん、コードを整理しておくためには、慎重かつ戦術的である必要があります。

私のプロジェクトの 1 つである SPA (シングル ページ アプリ) の構築では、目標を達成するためにさまざまなコンポーネントがありました。うまく整理する秘訣は、コンポーネントを追跡することです。たとえば、App.js コンポーネントは、更新が必要なデータの種類に応じて {useState} を使用します。
React から {useEffect} という別の強力なフックを導入し、それを {useState} とともに使用して、これらのフックがデータに対してどのように操作を実行するかを説明しましょう。次の例は、最近のプロジェクトで使用した App.js コンポーネントからのものです。私は、1 年間の子供の発達を助けるおもちゃの db.json ファイル データを扱っていました。これは私のエンドポイント http://localhost:4000/toys で、アプリケーション コンポーネント内で {useState} と {useEffect} がどのように動作するかのプロセスを理解するのに役立ちます。

最初: 状態の初期化:

const [toys, setToys] = useState([]);

• この行は、空の配列 [] を初期値として状態変数 Toys を初期化します。
• setToys は、おもちゃの状態を更新するために使用される関数です。

2 番目: コンポーネント マウントでデータを取得:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• {useEffect} フックは、コンポーネントで副作用を実行するために使用されます。
• 依存関係配列 ([]) が空であるため、{useEffect} 内の関数はコンポーネントのマウント時に 1 回実行されます。

3 番目: おもちゃのデータを取得:

• fetch("http://localhost:4000/toys")
  • この行は、指定された URL に対して GET リクエストを実行して、おもちゃのデータを取得します。
• .then(応答 => 応答.json())
  • フェッチ リクエストからの応答は JSON 形式に変換されます。
• .then(おもちゃデータ => setToyData(おもちゃデータ));
  • JSON データ (toysData) は、setToys 関数を使用しておもちゃの状態を更新するために使用されます。

{useState、useEffect} の両方がどのように機能するかをさらに詳しく理解するには、React の公式 Web サイトにアクセスしてください。さらに、もう 1 つの役立つ情報源は、私の個人的なお気に入りである w3schools の Web サイトです。独自のブラウザで試すことができる例とともに要点を直接説明します。最後に、より技術的なソースが必要な場合は、mdn Web ドキュメントが役に立ちます。