useState é um gancho React que permite adicionar estado aos seus componentes retornando um array com duas variáveis: state, setState. O estado atual e a função que se torna a função setter quando é chamada. Ele pode ser usado para rastrear dados ou propriedades que precisam ser rastreados em um aplicativo, como strings, números, booleanos, matrizes ou objetos.
Exemplo:

const [state, setState] = useState();

Em termos simples, o estado mudará a qualquer momento e precisa ser atualizado, portanto, 'setState' atualizará o estado, acionando uma nova renderização de seus componentes ao longo do tempo.

Além disso, useState pode conter qualquer tipo de valor Javascript, incluindo objetos. Algo que SEMPRE devemos ter em mente é que você nunca deve alterar objetos que você mantém no estado React diretamente. Primeiro, você precisa criar um novo ou criar uma cópia de um existente e então definirState para a nova cópia. Por exemplo:

// 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 em um componente React, primeiro você precisa importá-lo do React escrevendo o seguinte código no topo da página do componente de duas maneiras diferentes, ambas funcionam perfeitamente para que você possa escolher seu veneno.

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

ou você pode escrever em uma linha

import React, {useState} from 'react';

React Hook useState pode ser chamado no nível superior de um componente ou dentro de ganchos personalizados, mas não dentro de loops ou condições.

const [initialState, setInitialState] = useState();

o InitialState é usado apenas durante a renderização inicial e será desconsiderado nas renderizações subsequentes.
A função inicialState é passada para a função setInitialState, ela pega o estado anterior como argumento e retorna um newState.

Além disso, na minha opinião, não existem regras especiais sobre onde você pode ou não usar Hooks no React. Claro, você precisa ser cauteloso e tático para manter seu código organizado.

Em um dos meus projetos, a construção de um SPA (Single Page App) havia vários componentes para atingir meu objetivo. O segredo para estar bem organizado é manter o controle dos seus componentes. Por exemplo, seu componente App.js usará {useState} dependendo do tipo de dados que precisa ser atualizado.
Vamos apresentar outro gancho poderoso do React chamado: {useEffect} e usá-lo junto com {useState} para explicar como esses ganchos executam operações nos dados. O exemplo a seguir vem do meu componente App.js que usei em um projeto recente. Eu estava trabalhando com um arquivo db.json de dados para brinquedos que ajudarão no desenvolvimento das crianças no primeiro ano. Este é meu endpoint http://localhost:4000/toys para ajudá-lo a entender o processo de como {useState} e {useEffect} funcionam dentro de um componente de aplicativo.

Primeiro: Estado de inicialização:

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

• Esta linha inicializa uma variável de estado brinquedos com um array vazio [] como valor inicial.
• setToys é uma função que será usada para atualizar o estado dos brinquedos.

Segundo: Buscar dados na montagem do componente:

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

• O gancho {useEffect} é usado para realizar efeitos colaterais no componente.
• A função dentro de {useEffect} será executada uma vez quando o componente for montado porque a matriz de dependência ([]) está vazia.

Terceiro: Buscar dados de brinquedos:

• buscar("http://localhost:4000/brinquedos")
  • Esta linha faz uma solicitação GET ao URL especificado para buscar dados de brinquedos.
• .then(resposta => resposta.json())
  • a resposta da solicitação de busca é convertida para o formato JSON.
• .then(toysData => setToyData(toysData));
  • Os dados JSON (toysData) são usados ​​para atualizar o estado dos brinquedos usando a função setToys.

Para entender mais detalhadamente como {useState, useEffect} funcionam, você pode visitar o site oficial do React. Além disso, outra fonte útil é o site w3schools, que é meu favorito. Vai direto ao ponto com exemplos que você pode experimentar em seu próprio navegador. Por último, se você precisar de uma fonte mais técnica, os documentos da web do mdn irão ajudá-lo.