O Que São Estados no React?

No React, um estado é um objeto gerenciado dentro de um componente funcional que armazena valores ou informações que podem mudar ao longo do tempo. Estados são cruciais para criar componentes dinâmicos e interativos.

Como Funcionam os Estados em Componentes Funcionais?

Inicialização com useState:
O hook useState é usado para inicializar um estado em um componente funcional. Ele retorna um par de valores: o estado atual e uma função que permite atualizá-lo.
Sintaxe: const [state, setState] = useState(initialState);
Atualização do Estado:
Para atualizar o estado, usa-se a função setState. Ao chamar essa função, o React reagenda o componente para renderização, atualizando a UI com os novos valores do estado.
A atualização do estado é assíncrona, o que significa que as mudanças não são aplicadas imediatamente.

Exemplo Prático

import React, { useState } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Neste exemplo, count é um estado que armazena o número de vezes que o botão foi clicado. setCount é a função que atualiza esse estado.

import React, { useState } from 'react';
 
function TextInput() {
  const [text, setText] = useState('');
 
  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <p>O texto digitado é: {text}</p>
    </div>
  );
}

Aqui, text é o estado que armazena o valor atual do campo de entrada (input). Sempre que o valor do input muda, setText é chamado para atualizar o estado text.

Por Que os Estados São Importantes?

Interatividade: Estados permitem criar componentes interativos que respondem às ações do usuário.
Reatividade: A UI reage automaticamente às mudanças de estado, facilitando a criação de interfaces dinâmicas.
Gerenciamento de Dados: Estados oferecem uma maneira organizada de gerenciar dados dentro de componentes.

Conclusão

Entender e utilizar estados eficientemente é um aspecto chave para dominar o desenvolvimento de aplicações com React.