Neste artigo você aprenderá a como alterar corretamente o estado com useState, um hook muito importante do React JS!
Fala programador(a), beleza? Bora aprender mais sobre programação e React!
O React é uma biblioteca de JavaScript para criar interfaces de usuário, amplamente utilizado por sua simplicidade e flexibilidade.
Um dos principais conceitos em React é o estado, que permite que componentes mantenham e manipulem dados.
O Hook useState é uma das maneiras mais comuns de gerenciar o estado no React.
Entendendo o useState
No React, o estado é uma instância de dados que pode ser manipulada e renderizada no componente.
O Hook useState é uma função que permite que você adicione o estado ao componente funcional do React.
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, useState(0) é uma função que aceita o estado inicial como argumento (neste caso, 0) e retorna uma matriz com dois elementos: a primeira é a variável de estado atual (count) e a segunda é a função para atualizar o estado (setCount).
Atualizando o Estado Corretamente
Uma das coisas mais importantes a lembrar ao usar useState é nunca atualizar o estado diretamente.
Sempre use a função de atualização de estado (setCount no exemplo acima) fornecida por useState.
Isso ocorre porque o React depende do antigo estado para calcular o novo estado e renderizar a UI de acordo.
Estado Anterior
Em algumas situações, precisamos acessar o estado anterior para calcular o novo estado.
Nesse caso, podemos passar uma função para a função de atualização de estado.
Esta função recebe o estado anterior como argumento e retorna o novo estado.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={() => setCount(prevCount => prevCount + 1)}>
Clique aqui
</button>
</div>
);
}
Aqui, setCount recebe uma função que usa prevCount (o estado anterior de count) para calcular o novo estado.
useState com Objetos e Arrays
Também podemos usar useState com objetos e arrays. No entanto, é importante lembrar que useState não faz a fusão de objetos ou arrays como this.setState faz em componentes de classe.
Em vez disso, ele substitui o estado anterior pelo novo estado.
import React, { useState } from 'react';
function Form() {
const [form, setForm] = useState({ name: '', email: '' });
const handleChange = e => {
setForm(prevForm => ({
...prevForm,
[e.target.name]: e.target.value,
}));
};
return (
<div>
<input name="name" value={form.name} onChange={handleChange} />
<input name="email" value={form.email} onChange={handleChange} />
</div>
);
}
Neste exemplo, estamos usando a função handleChange para atualizar o estado do formulário. Estamos usando o operador de propagação (...) para copiar todo o estado anterior e, em seguida, atualizamos apenas a propriedade que queremos.
O useState é Assíncrono
Uma coisa crucial para entender sobre o useState é que a atualização do estado é assíncrona. Isto significa que as chamadas setState são enfileiradas e executadas após a renderização do componente ter sido concluída.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
console.log(count); // Isto irá logar o estado anterior, não o novo estado
};
return (
<div>
<p>Você clicou {count} vezes</p>
<button onClick={handleClick}>
Clique aqui
</button>
</div>
);
}
Neste exemplo, você pode esperar que o console.log registre o novo estado após o setCount, mas ele ainda irá registrar o estado anterior.
Isso ocorre porque a atualização do estado não ocorre imediatamente, mas é agendada para acontecer depois que a renderização atual é concluída.
Usando Múltiplos Estados
Uma das vantagens do Hook useState é que você pode usá-lo várias vezes em um único componente. Isso permite que você separe diferentes valores de estado em diferentes variáveis de estado, em vez de ter um único objeto de estado grande.
import React, { useState } from 'react';
function Form() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
// ...
return (
<div>
<input value={name} onChange={e => setName(e.target.value)} />
<input value={email} onChange={e => setEmail(e.target.value)} />
</div>
);
}
Separar o estado desta maneira pode tornar seu código mais limpo e mais fácil de gerenciar, especialmente à medida que seu componente cresce e se torna mais complexo.
Estado Derivado
Em alguns casos, você pode querer derivar o estado de outra propriedade ou variável. Isso é chamado de estado derivado.
No entanto, tenha cuidado ao fazer isso, pois pode levar a bugs se não for gerenciado corretamente.
import React, { useState, useEffect } from 'react';
function UserName({ id }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(id).then(userData => setUser(userData));
}, [id]);
// ...
return <div>{user ? user.name : 'Carregando...'}</div>;
}
Neste exemplo, o estado user é derivado do prop id. Sempre que id muda, a função fetchUser é chamada para atualizar o estado user.
Isso é feito usando o Hook useEffect, que permite executar efeitos colaterais (como buscar dados) em componentes funcionais.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
E chegamos ao fim do artigo sobre como alterar corretamente o estado com useState!
O Hook useState é uma ferramenta poderosa para gerenciar o estado em componentes funcionais do React.
Ele oferece flexibilidade para trabalhar com vários tipos de dados e fornece um método fácil de manipular e renderizar dados de estado em sua aplicação.
Lembre-se sempre de não alterar o estado diretamente e usar a função de atualização de estado para garantir que o React possa acompanhar as mudanças e renderizar a interface do usuário de acordo.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.