React: Entendendo a Diferença entre Estado e Variável
No desenvolvimento com React, é crucial compreender a diferença entre o estado (
state) e variáveis normais. Esta compreensão é fundamental para otimizar a performance de seus componentes e evitar re-renders desnecessários.Estado vs. Variável Normal
Estado (
state):- O estado é um objeto gerenciado pelo React que permite que componentes respondam e renderizem dinamicamente baseados em mudanças de dados.
- Quando o estado de um componente muda, o React re-renderiza o componente para refletir a mudança.
- O estado é manipulado através de hooks como
useState.
Variável Normal:
- Variáveis normais são simples contêineres de dados que não provocam re-renderização do componente quando seus valores mudam.
- São usadas para dados que não necessitam de re-renderização dinâmica.
Algoritmo de Reconciliação
O React utiliza um algoritmo de reconciliação, que otimiza a re-renderização do DOM. Esse algoritmo verifica o que mudou no estado e atualiza apenas as partes necessárias do DOM, ao invés de recriar tudo do zero. Isso melhora significativamente a performance da aplicação.
Implementando Lógica com useEffect
Uma prática comum em React é fazer chamadas para APIs ou outras operações que geram efeitos colaterais. Usar variáveis normais para essas operações pode causar problemas de performance, pois cada mudança no estado do componente resultaria em múltiplas execuções da lógica.
Para resolver isso, o React oferece o hook
useEffect.Estrutura do useEffect
O
useEffect aceita dois parâmetros:1. Função de Efeito: A função que será executada.
2. Array de Dependências: Um array que define quando o efeito deve ser executado novamente.
useEffect(() => { // Código do efeito aqui }, [dependências]);
Se as dependências mudarem, a função de efeito será reexecutada.
Exemplo Prático: Chamadas de API com useEffect
Vamos construir um componente que faz uma chamada de API para buscar dados de participantes e renderizá-los na tela.
import { useState, useEffect } from 'react'; function MeuComponente() { const [page, setPage] = useState(1); const [attendees, setAttendees] = useState([]); useEffect(() => { // Fazendo a chamada para a API fetch(`http://localhost:3333/events/{eventId}/attendees?page=${page}`) .then(response => response.json()) .then(data => setAttendees(data.attendees)); }, [page]); // O efeito será reexecutado apenas quando `page` mudar return ( <div> {attendees.map(attendee => ( <div key={attendee.id}>{attendee.name}</div> ))} </div> ); }
Vamos ficar por dentro
Declaração do Estado:
const [page, setPage] = useState(1);: Estadopageinicializado com1.
const [attendees, setAttendees] = useState([]);: Estadoattendeesinicializado como um array vazio.
Hook
useEffect:- A função passada para o
useEffectfaz uma chamadafetchpara a API, utilizando o estadopagepara buscar a página correta de dados.
- Quando a resposta chega, ela é convertida em JSON e o estado
attendeesé atualizado com os dados recebidos.
Array de Dependências:
[page]: O efeito só será executado novamente sepagemudar.
Renderização da Lista de Participantes:
- No retorno do componente, mapeamos os
attendeespara renderizar cada participante.
Considerações Adicionais
Lidar com Efeitos de Limpeza
Algumas operações podem necessitar de uma limpeza após a execução, como assinaturas de eventos ou timers. O
useEffect pode retornar uma função de limpeza que será executada quando o componente for desmontado ou antes da próxima execução do efeito.useEffect(() => { const timer = setInterval(() => { console.log('Executando...'); }, 1000); return () => clearInterval(timer); // Função de limpeza }, []);
Controlando Múltiplos Efeitos
É possível usar múltiplos
useEffect em um componente para controlar diferentes efeitos de maneira mais granular.useEffect(() => { // Efeito A }, [dependênciaA]); useEffect(() => { // Efeito B }, [dependênciaB]);
O uso adequado de estados e efeitos (
useEffect) é essencial para criar componentes React eficientes e responsivos. Compreender quando e como utilizar esses conceitos permite que você evite re-renderizações desnecessárias, melhorando a performance e a experiência do usuário em suas aplicações.Esta abordagem modular e controlada não só facilita a manutenção do código como também torna o desenvolvimento com React mais intuitivo e poderoso.
