Guia Prático: Utilizando useState e useEffect em seu Projeto React

Introdução

Neste artigo, vamos explorar dois dos hooks mais importantes no React: useState e useEffect. Eles permitem que você adicione estado e efeitos colaterais a componentes funcionais, tornando seu código mais limpo e eficiente. Vamos direto ao ponto com exemplos práticos.

Como Utilizar o useState

O que é useState?

O hook useState permite que você adicione um estado local a componentes funcionais. Ele retorna um array com duas posições: o estado atual e uma função para atualizá-lo.

Exemplo Prático: Contador Simples

Vamos criar um contador simples que aumenta o valor a cada clique.

import React, { useState } from 'react';

function Contador() {
 const [contador, setContador] = useState(0);

 return (
<div>
 <p>Você clicou {contador} vezes</p>
 <button onClick={() => setContador(contador + 1)}>
  Clique aqui
 </button>
</div>
 );
}

export default Contador;

Neste exemplo, useState(0) inicializa o estado contador com o valor 0. A função setContador é usada para atualizar o estado quando o botão é clicado.

Como Utilizar o useEffect

O que é useEffect?

O hook useEffect permite que você execute efeitos colaterais em componentes funcionais. É similar aos métodos de ciclo de vida componentDidMount, componentDidUpdate, e componentWillUnmount nas classes.

Exemplo Prático: Fetch de Dados

Vamos buscar dados de uma API quando o componente é montado.

import React, { useState, useEffect } from 'react';

function DadosUsuario() {
 const [usuario, setUsuario] = useState(null);

 useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
 .then(response => response.json())
 .then(data => setUsuario(data));
 }, []);

 if (!usuario) return <div>Carregando...</div>;

 return (
<div>
 <h1>{usuario.name}</h1>
 <p>Email: {usuario.email}</p>
</div>
 );
}

export default DadosUsuario;

Aqui, useEffect é utilizado para buscar dados quando o componente é montado ([] como segundo argumento indica que o efeito só roda uma vez, semelhante a componentDidMount).

Utilizando useState e useEffect Juntos

Exemplo Prático: Filtrando uma Lista de Itens

Vamos criar um componente que filtra uma lista de itens com base em uma entrada do usuário.

import React, { useState, useEffect } from 'react';

function ListaFiltrada() {
 const [itens, setItens] = useState([]);
 const [filtro, setFiltro] = useState('');
 const [itensFiltrados, setItensFiltrados] = useState([]);

 useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos')
 .then(response => response.json())
 .then(data => setItens(data));
 }, []);

 useEffect(() => {
setItensFiltrados(
 itens.filter(item => item.title.includes(filtro))
);
 }, [filtro, itens]);

 return (
<div>
 <input
  type="text"
  value={filtro}
  onChange={e => setFiltro(e.target.value)}
  placeholder="Filtrar itens"
 />
 <ul>
  {itensFiltrados.map(item => (
   <li key={item.id}>{item.title}</li>
  ))}
 </ul>
</div>
 );
}

export default ListaFiltrada;

Neste exemplo, utilizamos dois hooks useEffect: o primeiro para buscar os itens da API quando o componente é montado, e o segundo para filtrar a lista de itens com base na entrada do usuário.

Conclusão

Os hooks useState e useEffect são fundamentais para o desenvolvimento de componentes funcionais no React. Eles permitem que você gerencie estado e efeitos colaterais de maneira simples e eficaz. Com os exemplos práticos deste artigo, você está pronto para começar a usá-los em seus próprios projetos. Boa codificação!