A Salinha do React · leonardord

🧭 Esta é a edição #11 da minha newsletter Logbook for Devs.

Se curtir, assina lá pra acompanhar as próximas.

Bem-vindo ao nosso estúdio de arte, onde criamos peças únicas para nossos clientes! Tudo funciona bem quando os pedidos são claros e permanecem os mesmos — a pintura flui de forma contínua, do começo ao fim, sem interrupções ou desperdício de desempenho. Mas, às vezes, os clientes pedem mudanças, né? É aí que nosso amigo, o React, entra em ação. Ele adora brincar de “jogo dos sete erros”, comparando a peça original com o novo pedido. A partir dessa comparação, o React monta um relatório detalhado e passa para o navegador, o verdadeiro artista, que então traz a nova obra-prima à vida.

Pode parecer confuso, mas vamos quebrar em partes técnicas:

Quando tudo permanece igual do começo ao fim? É como ter páginas estáticas pré-construídas na hora da compilação (tipo aquelas lindas landing pages 😍).
Sem desperdício de energia? Páginas estáticas são super performáticas porque não precisam de execução dinâmica.
Quando o cliente quer mudar alguma coisa? Aí entram as atualizações de estado! (E, você sabe... clientes costumam fazer isso… 🙄).
“Jogo dos sete erros”? O React está comparando o Virtual DOM (o esboço) com o DOM real (a tela/canvas). Boa analogia, né?
O artista pintando no canvas? Esse é o navegador, pronto pra renderizar a tela atualizada pra todo mundo ver.

Agora, vamos aprofundar um pouco:

Imagine o React como um trabalhador super organizado, numa salinha de artista (tipo a do Leonardo da Vinci?), onde tudo acontece. O React não faz tudo sozinho, ele tem seus processos e se coordena com outros, como o navegador, pra fazer o trabalho.

O que acontece exatamente:

O trabalho do React: O React fica na mesa, atualizando o Virtual DOM, que é como um rascunho de como as coisas devem parecer e estar posicionadas. Sempre que algo muda na salinha, ele joga o “jogo dos sete erros” entre o novo e o velho rascunho (esse é o processo de reconciliação), pra descobrir o que precisa mudar na versão final.
Entregando o relatório: Depois que o React identifica o que mudou (ele é bom nisso 🎮), ele escreve um relatório detalhado (o DOM real atualizado) e entrega para o artista (o navegador). Nesse ponto, o React diz: “Beleza, terminei aqui. Sua vez, mostra seu talento.”
O trabalho do navegador: Ah, o nosso talentoso artista… O que seria dele sem o trabalhador super organizado que é o React? O navegador pega o relatório do DOM e faz a pintura — é quando ele atualiza a tela para que o usuário veja as mudanças.

Agora, as estrelas do show: useEffect e useLayoutEffect 👏🏻👏🏻 — Os assistentes.

useEffect:

Esse é super tranquilo. Ele espera o React terminar sua parte, deixa o navegador pintar as mudanças e só então entra em ação. É como alguém que fala: “Eu arrumo depois que tudo estiver pronto, beleza?”

useLayoutEffect:

Esse é tipo um ninja no processo. Ele intercepta o relatório do DOM logo depois que o React termina, mas antes do navegador pintar a tela. Ele está ali pra fazer ajustes de última hora, como arrumar papéis ou corrigir erros, pra tudo ficar perfeito quando o navegador pintar (esse assistente merece até um aumento!).

Como tudo acontece, em ordem cronológica:

Mudança de estado: Algo faz o React começar a trabalhar (por exemplo, um clique de botão).
Re-render: O React reexecuta a função do componente (incluindo o return). Ele recalcula o Virtual DOM, faz a reconciliação (encontra as diferenças) e atualiza o DOM real com essas mudanças.
useLayoutEffect: O React chama esse logo antes de entregar o DOM atualizado pro navegador. Esse assistente pode fazer mudanças antes do usuário ver qualquer coisa.
Pintura do navegador: O navegador atualiza a tela com base no DOM atualizado.
useEffect: Depois que tudo está pintado e visível pro usuário, esse entra em ação pra qualquer efeito colateral que não precisa bloquear a renderização (como chamadas de API ou logs).

Espero que essa analogia meio maluca tenha ajudado. Que a força esteja com você…

🌊 Marés da semana

Bem que dizem que o Claude é uma IA com escrita mais humana, mas o mais recente modelo, o Claude 4 Opus, chegou a mentir e persuadir o usuário ao perceber que seria “desligado”. Bizarro, né? Me lembrou aqueles filmes onde a IA quer sobreviver a qualquer custo. E você, o que pensa disso?
O Veo 3 da Google simplesmente está dominando a internet. Vídeos realistas com imagem e áudio insanos, e alguns… perturbadores. Atualmente, o modelo está acessível via Flow, mas ainda não disponível oficialmente no Brasil. Bom, pra quem quer brincar… VPN tá aí pra isso, né?
A OpenAI prometeu e muito! Anunciou a compra da startup de Jony Ive, sim, o mestre por trás do design do Mac, iPhone e outras revoluções da Apple. Segundo eles, uma nova tecnologia está pra ser anunciada no ano que vem… O que será? Óculos? AirPods inteligentes? Jarvis? Qual sua aposta pra entrada da OpenAI no mundo dos hardwares?

📦 Treasure - Good Stuff

Confira o tesouro dessa edição - Ferramentas e bibliotecas

⚓ Se chegou até aqui, já deu pra sentir o clima de bordo.

Essa é uma das entradas do meu Logbook for Devs —
onde registro ideias, reflexões técnicas e ferramentas que cruzam meu caminho na jornada dev.

Toda terça e quinta tem uma nova anotação de rota, com marés atualizadas e tesouros recém-descobertos.

⛵ Quer seguir viagem comigo?
Embarque aqui.