EP9: Supermercado e Waterfall React
🧭 Mapa da Edição
📓 Quando a interface congela como uma fila de supermercado: Suspense, Streaming e o fim do waterfall rendering
🌊 IAs que criam dialetos próprios, terminais que pensam por você e o VSCode querendo seu lugar ao sol
📦 Do fundo do mar dev: carrosséis sem dor, drag’n drop com charme e hooks prontos pro uso
📓 Entrada no Logbook
Sabe aquela cena clássica no supermercado? A fila anda bem até que... trava. O caixa não consegue finalizar a compra porque um dos produtos está sem código. Ninguém avança. Você, impaciente, só observa o tempo passando.
Esse pequeno caos cotidiano é um bom espelho do waterfall rendering no React: quando um componente depende que outro carregue por completo antes de mostrar qualquer coisa, tudo congela. Nada aparece. O usuário fica na fila, esperando a tela “liberar o caixa”.
Agora imagina um supermercado mais esperto: o atendente passa o que está disponível, avança com o que tem, e resolve o item pendente em paralelo. A fila anda, o fluxo segue, ninguém fica travado.
Essa é a lógica por trás do que o Next.js 15 está promovendo com React Suspense + Streaming.
Essa ideia me bateu forte enquanto lia o artigo “React Feature Architecture”, do Robin Wieruch. Além de defender uma separação de componentes mais estratégica – organizados por escopos e responsabilidades –, ele reforça um ponto importante: modularizar bem também é sobre performance de renderização.
Por exemplo, se temos um componente de Post e outro de Comments, por que esperar que tudo carregue antes de mostrar alguma coisa? Deixe o Post aparecer logo. Entregue valor rápido. Os Comments podem vir depois, carregando de forma assíncrona sem segurar a experiência.
E tem mais: se comentários têm peso para SEO, dá pra ser esperto com isso também. Carrega um chunk inicial para garantir indexação e deixa o restante fluir com streaming. A experiência segue leve, mas sem sacrificar visibilidade.
💡 Resumo do carrinho:
Modularize seus componentes por escopo, mas também pensando na experiência.
Divida requisições: não deixe um dado travar tudo.
Use o Suspense a seu favor – seu usuário agradece (e o Google também).
🌊 Marés da semana
A OpenAI lançou o Codex, um Coding Agent integrado ao ChatGPT para usuários Pro. É como o de terminal (CLI), mas com um toque de “produto” pra deixar tudo mais amigável.
Pesquisadores descobriram que grupos de IAs são capazes de desenvolver seus próprios “dialetos” pra se comunicar com mais eficiência. Parece coisa de filme, mas já rolava algo parecido no clássico experimento dos assistentes de voz se auto-ajustando em tempo real. (Aliás, vale ver esse vídeo aqui) 👀
VSCode quer deixar de ser só base pros forks e anunciou planos de se tornar uma IDE Open Source com IA integrada. Com o time principal da Microsoft em cima disso, será que teremos uma resposta à altura do Cursor e Windsurf?
📦 Treasure - Good Stuff
Se você já sofreu tentando implementar carrosséis (quem nunca?), dá uma chance ao Embla. Fácil de usar, leve e com uma doc direta ao ponto.
E pra quem ama um bom Drag’n Drop: conheça o React Beautiful DnD. Tem até um mini curso em vídeo que ensina tudo de forma visual e prática.
E se você é do tipo que adora um bom hook pronto: useHooks.ts é um repositório cheio de utilitários úteis pra acelerar seu dia a dia no React