Entendendo o Ciclo de Vida dos Componentes React

Jonas Gabriel — Wed, 15 Jan 2025 13:00:34 +0000

Imagine que você está construindo um modelo LEGO.

Primeiro, você junta as peças (inicialização), depois começa a montar (renderização), faz ajustes conforme necessário (atualização) e, finalmente, se terminar ou mudar de modelo, desmonta tudo (desmontagem).

O ciclo de vida de um componente React funciona de forma semelhante!

O Ciclo de vida de um componente React

Os componentes React passam por três fases principais:

Montagem: Quando o componente é criado e inserido no DOM pela primeira vez.
Atualização: Quando as props ou o estado do componente mudam, ele é atualizado para refletir essas alterações.
Desmontagem: Quando um componente é removido do DOM.

Vamos detalhar cada etapa:

1. Montagem: "Construindo o modelo LEGO"

Quando um componente React é criado, as seguintes etapas acontecem:

constructor (opcional): Configura o estado inicial e vincula manipuladores de eventos.

render(): Descreve como a interface do usuário deve ser exibida.

useEffect (com array de dependências vazio): Executa após o componente ser montado, ideal para buscar dados ou se inscrever em serviços.

Exemplo:

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

function Welcome() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    setMessage("Bem-vindo ao React!"); // Simula a busca de dados iniciais
  }, []); // Executa apenas uma vez ao montar

  return <h1>{message}</h1>;
}

2. Atualização: "Fazendo ajustes"

Os componentes React são atualizados quando:

O estado muda: Acionado por useState ou hooks similares.

As props mudam: Quando novos dados são passados de um componente pai.

Para otimizar as atualizações:

Use keys exclusivas em listas para ajudar o React a atualizar o DOM de forma eficiente.

Utilize hooks como useMemo e useCallback para evitar recálculos ou re-renderizações desnecessárias.

Exemplo:

import React, { useState, useCallback, useMemo } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);

  // Função incrementada com useCallback para evitar recriação em cada renderização
  const increment = useCallback(
    () => setCount((prevCount) => prevCount + 1),
    []
  );

  // Valor memoizado para simular um cálculo pesado
  const expensiveCalculation = useMemo(() => {
    console.log("Recalculando valor...");
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Cálculo pesado (count * 2): {expensiveCalculation}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={() => setOtherState(!otherState)}>
        Alterar outro estado
      </button>
    </div>
  );
}

export default Counter;

Explicação:

useCallback:

O increment é memoizado com useCallback, o que evita que ele seja recriado em cada renderização. Isso é útil ao passar a função como prop para componentes filhos, evitando renderizações desnecessárias.

useMemo:

A variável expensiveCalculation é calculada apenas quando o estado count muda, evitando cálculos desnecessários nas renderizações.

Testando a otimização:

Quando você clicar em "Alterar outro estado", verá que o cálculo pesado não será executado novamente, já que ele depende apenas de count.

3. Desmontagem: "Desmontando o modelo LEGO"

Quando um componente é removido do DOM, o React realiza uma limpeza para evitar vazamentos de memória. Você pode lidar com isso usando:

useEffect (com uma função de limpeza): Ideal para cancelar inscrições ou temporizadores.

Exemplo:

function Timer() {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("Tick");
    }, 1000);

    return () => clearInterval(interval); // Limpeza ao desmontar
  }, []);

  return <p>Confira o console para os ticks!</p>;
}

Por que isso é importante?

Entender o ciclo de vida dos componentes React ajuda você a:

Escrever códigos eficientes e livres de bugs.
Otimizar o desempenho, evitando re-renderizações desnecessárias.
Gerenciar efeitos colaterais como chamadas de API e inscrições.

Dominando esses conceitos, você estará pronto para lidar com aplicações React complexas.

Resumo: Ciclo de vida do React em poucas palavras

Os componentes são montados (inicializados e renderizados).

Os componentes são atualizados (mudanças de props/estado).

Os componentes são desmontados (limpos e removidos).

Com hooks como useEffect, useCallback e useMemo, você tem as ferramentas para gerenciar cada fase de forma eficaz.
Bons códigos!

O que é Hoisting no JavaScript?

Jonas Gabriel — Tue, 14 Jan 2025 13:57:24 +0000

Imagine que você está se preparando para um show de mágica. Antes de começar, o mágico organiza todos os itens que ele vai usar no palco, colocando as cartas, os coelhos e o chapéu no lugar certo. Isso ajuda ele a fazer os truques sem se atrapalhar.

No JavaScript, acontece algo parecido quando você escreve seu código. O "mágico", nesse caso, é o JavaScript, que organiza algumas coisas antes de começar a rodar o programa. Essa organização automática é chamada de hoisting.

Como o Hoisting Funciona?

Definições Primeiro:
O JavaScript pega todas as declarações de variáveis e funções e as "sobe" para o topo do código. É como se ele dissesse: "Antes de começar, vou separar tudo o que é importante para não me perder."
Importante:
Só as declarações são movidas para o topo, não os valores atribuídos. É como se você dissesse: "Ei, essa cartola mágica existe!", mas o JavaScript só descobre como usar a cartola quando chegar na hora certa no código.

Um Exemplo Simples

Veja este código:

console.log(meuNome); // undefined
var meuNome = "Jonas";
console.log(meuNome); // Jonas

No início, parece estranho: Como o JavaScript sabe que meuNome existe antes de eu declarar?

Isso acontece porque ele faz algo assim nos bastidores:

var meuNome; // Declaração "subiu"
console.log(meuNome); // undefined
meuNome = "Jonas"; // Valor atribuído
console.log(meuNome); // Jonas

Ou seja, ele sobe a declaração da variável meuNome, mas só atribui o valor "Jonas" no lugar certo.

Hoisting com let e const

Agora, tem uma diferença importante: se você usar let ou const, o JavaScript não deixa você usar as variáveis antes de declarar.
Olha só:

console.log(idade); // Erro: Cannot access 'idade' before initialization
let idade = 14;

Isso acontece porque let e const ficam "guardados" numa área especial e só podem ser usadas depois que você as declarou.

Hoisting com Funções

Funções no JavaScript também são "erguidas". Veja este exemplo:

cumprimentar();

function cumprimentar() {
  console.log("Olá!");
}

Mesmo chamando a função antes de declarar, ela funciona! Isso acontece porque o JavaScript "sobe" a função inteira para o topo do código.

Conclusão

O hoisting é como se o JavaScript fosse um mágico super organizado: ele dá uma olhada rápida no seu código antes de começar a rodar, separa todas as declarações de variáveis e funções, e só depois começa o show.

Mas lembre-se: com grandes poderes vêm grandes responsabilidades. Usar o hoisting sem entender pode causar confusão. Então, declare suas variáveis e funções com cuidado para que seu código fique mais claro e organizado!

DEV Community: Jonas Gabriel

Entendendo o Ciclo de Vida dos Componentes React

O Ciclo de vida de um componente React

1. Montagem: "Construindo o modelo LEGO"

2. Atualização: "Fazendo ajustes"

Para otimizar as atualizações:

3. Desmontagem: "Desmontando o modelo LEGO"

Por que isso é importante?

Resumo: Ciclo de vida do React em poucas palavras

O que é Hoisting no JavaScript?

Como o Hoisting Funciona?

Um Exemplo Simples

Hoisting com let e const

Hoisting com Funções

Conclusão