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.