useState es un gancho React que le permite agregar estado a sus componentes devolviendo una matriz con dos variables: state, setState. El estado actual y la función que se convierte en la función de establecimiento cuando se llama. Se puede utilizar para rastrear datos o propiedades que deben rastrearse en una aplicación, como cadenas, números, valores booleanos, matrices u objetos.
Ejemplo:

const [state, setState] = useState();

En términos simples, el estado cambiará en algún momento y debe actualizarse, por lo tanto, 'setState' actualizará el estado, lo que provocará una nueva representación de sus componentes con el tiempo.

Además, useState puede contener cualquier tipo de valor de Javascript, incluidos objetos. Algo que SIEMPRE debes tener en cuenta es que nunca debes cambiar los objetos que tienes en el estado React directamente. Primero, debe crear uno nuevo o crear una copia de uno existente y luego configurar State en la nueva copia. Por ejemplo:

// 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));
};

Para usar useState en un componente React, primero debe importarlo desde React escribiendo el siguiente código en la parte superior de la página del componente de dos maneras diferentes, ambas funcionan perfectamente para que puedas elegir tu veneno.

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

o puedes escribir en una línea

import React, {useState} from 'react';

React Hook useState se puede llamar en el nivel superior de un componente o dentro de ganchos personalizados, pero no dentro de bucles o condiciones.

const [initialState, setInitialState] = useState();

el estado inicial solo se usa durante el renderizado inicial y no se tendrá en cuenta en renderizados posteriores.
La función estadoinicial se pasa a la función setInitialState, toma el estado anterior como argumento y devuelve un nuevoEstado.

Además, en mi opinión, no existen reglas especiales sobre dónde puedes y dónde no puedes usar Hooks en React. Por supuesto, debes ser cauteloso y táctico para mantener tu código organizado.

En uno de mis proyectos, la creación de una SPA (aplicación de página única) había varios componentes para lograr mi objetivo. El secreto para estar bien organizado es llevar un registro de tus componentes. Por ejemplo, su componente App.js usará {useState} dependiendo del tipo de datos que necesiten actualizarse.
Introduzcamos otro potente gancho de React llamado: {useEffect} y utilícelo junto con {useState} para explicar cómo estos ganchos realizan operaciones con los datos. El siguiente ejemplo proviene de mi componente App.js que utilicé en un proyecto reciente. Estaba trabajando con un archivo db.json de datos para juguetes que ayudarán al desarrollo de los niños durante el primer año. Este es mi punto final http://localhost:4000/toys para ayudarlo a comprender el proceso de cómo funcionan {useState} y {useEffect} dentro de un componente de la aplicación.

Primero: Estado de inicialización:

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

• Esta línea inicializa una variable de estado juguetes con una matriz vacía [] como valor inicial.
• setToys es una función que se utilizará para actualizar el estado de los juguetes.

Segundo: Obtener datos en el montaje del componente:

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

• El gancho {useEffect} se utiliza para realizar efectos secundarios en el componente.
• La función dentro de {useEffect} se ejecutará una vez cuando el componente se monte porque la matriz de dependencia ([]) está vacía.

Tercero: Buscar datos de juguetes:

• buscar("http://localhost:4000/juguetes")
  • Esta línea realiza una solicitud GET a la URL especificada para recuperar datos de juguetes.
• .entonces(respuesta => respuesta.json())
  • la respuesta de la solicitud de recuperación se convierte al formato JSON.
• .then(juguetesData => setToyData(juguetesData));
  • Los datos JSON (toysData) se utilizan para actualizar el estado de los juguetes usando la función setToys.

Para comprender más en profundidad cómo funcionan ambos {useState, useEffect}, puedes visitar el sitio web oficial de React. Además, otra fuente útil es el sitio web de w3schools, que es mi favorito personal. Va directo al grano con ejemplos que puedes probar en tu propio navegador. Por último, si necesita una fuente más técnica, los documentos web de mdn le ayudarán.