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);: Estado page inicializado com 1.

const [attendees, setAttendees] = useState([]);: Estado attendees inicializado como um array vazio.

Hook useEffect:

A função passada para o useEffect faz uma chamada fetch para a API, utilizando o estado page para 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 se page mudar.

Renderização da Lista de Participantes:

No retorno do componente, mapeamos os attendees para 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.

Já tem graduação? Dê seu próximo passo...

Última chance do ano de garantir sua matrícula de pós-graduação pelo preço atual antes do reajuste!

Dê seu próximo passo...

Última chance antes do reajuste 🔥