Para que é que serve a diretiva useState?

useState é um hook do React que permite adicionar estado aos componentes funcionais. Ele retorna um array com dois elementos: o valor atual do estado e uma função para atualizá-lo. Ao chamar a função de atualização, o componente é re-renderizado com o novo valor.

Exemplo de uso:

import { useState } from 'react';

function Counter() {
  // 'count' é o estado atual, 'setCount' é a função para atualizá-lo
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Principais características:

• Adiciona estado: Permite usar estado em componentes funcionais, anteriormente disponível apenas em classes.
• Função de atualização: Retorna uma função especial para modificar o estado.
• Re-renderização: Alterar o estado através da função de atualização causa uma re-renderização do componente.
• Primitivos e objetos: Pode armazenar qualquer tipo de dado: números, strings, booleanos, objetos, arrays.
• Inicialização preguiçosa: O valor inicial pode ser uma função que é executada apenas na primeira renderização, útil para cálculos caros.

const [data, setData] = useState(() => {
  // Cálculos caros executados apenas uma vez
  const initialData = someExpensiveCalculation();
  return initialData;
});