O state é um dos fundamentos mais importantes do React e de outros frameworks front-end. É como o cérebro de um componente, significando que ele armazena informações que podem mudar ao longo do tempo e controla como os componentes se comportam e se apresentam. Vamos entender o que é estado e como o hook useState permite que você trabalhe com ele. State representa os dados dinâmicos no seu componente React, como o valor de uma entrada do usuário, dados obtidos de uma API ou um item em uma lista de tarefas. Sempre que o estado muda, o React re-renderiza o componente sem recarregar a página para refletir essas mudanças na interface do usuário. Essa reatividade torna seu app interativo. O hook useState é uma função que permite declarar variáveis de estado em componentes funcionais.  Antes dos hooks, você só podia usar state em componentes de classe. Mas com a introdução dos hooks desde o React 16.8, você pode usar estado em componentes funcionais usando o hook useState. Para usar o hook useState, você precisa importá-lo do React:

import { useState } from "react";

Você também pode importar o próprio React e obter acesso ao hook useState como uma propriedade:

import React from "react";

Aqui está como você pode declarar uma variável de estado quando importa useState:

const [stateVariable, setStateFunction] = useState(initialValue);

E aqui está como você pode declarar uma variável de estado quando importa o React:

const [stateVariable, setStateFunction] = React.useState(initialValue);

Na variável de estado você tem o seguinte:

• stateVariable mantém o valor do estado atual
• setStateFunction (a função setter) atualiza a variável de estado
• initialValue define o estado inicial

Observe que o estado em um componente React é privado e está isolado para cada instância do componente. Isso significa que, se você renderizar o mesmo componente duas vezes, o estado do componente de um não afeta o outro. Isso também significa que, se você quiser compartilhar estado entre componentes, então será necessário elevar o estado para um pai comum e passá-lo como props. Outra coisa é que os hooks devem ser chamados no nível superior de um componente, logo antes da palavra-chave return, para manter o estado e os efeitos consistentes entre as renderizações. Isso significa que você não pode usar state dentro de loops, condições ou funções aninhadas. Aqui está um exemplo de gerenciamento de estado com o hook useState em um componente Counter:

// Importing the useState hook
import { useState } from "react";

function Counter() {
  const initialValue = 0;

  // The state variable and setter function
  const [count, setCount] = useState(initialValue);

  return (
    <div>
      {/* Display current state value */}
      <h2>{count}</h2>

      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

No código acima, temos o hook useState importado do React. No componente Counter, o count representa o estado atual enquanto setCount é a função de definição responsável por atualizar o estado. O valor atual do estado é 0. A instrução return contém a contagem e dois botões para decrementar e incrementar a contagem em 1. Você pode gerenciar múltiplos estados chamando o hook useState várias vezes. Isto é especialmente importante quando você tem variáveis de estado não relacionadas:

function UserProfile() {
  const [isOnline, setIsOnline] = useState(false);
  const [notifications, setNotifications] = useState(0);

  // The rest of the component logic
}

Você também pode chamar o hook useState várias vezes ao gerenciar múltiplos estados que atualizam separadamente, como campos de formulário:

function SignUpForm() {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");

  // The rest of the component logic
}

Mas neste caso, é melhor combinar os estados já que eles fazem parte do mesmo formulário:

function SignUpForm() {
  const [formData, setFormData] = useState({
    name: "",
    username: "",
    email: "",
  });

  // The rest of the component logic
}

Isso é o que é state e como você pode usar o hook useState.