Pular para o conteúdo principal

5 publicações com a etiqueta "react"

Ver todas as etiquetas

React 19.3 e o browser(): o fim do useEffect(() => setMounted(true))

· 12 min para ler
Bruno Carneiro
Fundador da @TautornTech
React 19.3 e o browser()

Se você já trabalhou com React e renderização no servidor (SSR), com certeza já escreveu isso aqui:

const [mounted, setMounted] = useState(false);

useEffect(() => {
setMounted(true);
}, []);

if (!mounted) return null;

Ou essa outra versão, que parece mais simples e é pior:

if (typeof window === 'undefined') return null;

As duas existem pelo mesmo motivo: alguns componentes simplesmente não têm o que mostrar no servidor. Eles dependem do localStorage, do fuso horário do usuário, do tamanho da tela, de uma biblioteca que mexe no window. E o React nunca teve um jeito oficial de dizer "esse aqui, só no navegador".

No React 19.3, lançado em 9 de setembro de 2026, isso mudou. Chegou o browser().

jsdom ou happy-dom? Vantagens, desvantagens e um benchmark que você consegue reproduzir

· 10 min para ler
Bruno Carneiro
Fundador da @TautornTech
jsdom vs happy-dom

Todo projeto front-end com Vitest chega nessa pergunta em algum momento: environment: 'jsdom' ou environment: 'happy-dom'?

A resposta que circula por aí é "happy-dom é 2 a 4 vezes mais rápido". Fui atrás de onde vem esse número e, na maioria dos artigos, ele não tem código, não tem metodologia e não tem versão. Então resolvi medir.

Montei uma suíte com 240 testes de componentes React, rodei nos dois ambientes, em configurações diferentes do Vitest, várias vezes. Também testei 20 APIs e comportamentos do navegador nos dois pra ver o que cada um realmente implementa. O resultado tem uma surpresa: a configuração do Vitest pesa mais que a escolha da biblioteca.

Octane: o React sem o React por baixo, e o que isso sinaliza pro ecossistema

· 8 min para ler
Bruno Carneiro
Fundador da @TautornTech
Octane: o React compilado, sem virtual DOM

Se você acompanha o ecossistema React de perto, provavelmente tropeçou nesse anúncio essa semana. Dominic Gannaway lançou o Octane, descrito como "o modelo de programação do React, compilado". É o sucessor declarado do Inferno, framework que o próprio Gannaway criou lá em 2016 com o mesmo pitch de performance. Um gênio indomável.

Vale parar pra entender duas coisas. Primeiro, o que ele faz tecnicamente. Segundo, e mais importante pra quem decide stack, o que a chegada dele diz sobre pra onde o React está indo.

Vamos para a maior de todas novidades da última semana!

Docusaurus - Integração com Tailwindcss

· 6 min para ler
Bruno Carneiro
Fundador da @TautornTech

Este é um tutorial pra quem, assim como eu, adora trabalhar com o Docusaurus e quer utilizar todos os recursos do Tailwind CSS.

Bom, não da pra ficar criando CSS na mão toda vez que foi alinhar uma div, gerar bordas arredondas e várias outras coisas que são repetitivas. Sem contar no tempo que isso leva e que poderíamos estar focando no que realmente importa, realizando alguma entrega, criando algo, no meu caso escrevendo escrevendo este conteúdo para vocês =D.