Fala galeres ! Biene? Bora de conteúdo referente a performance em React 😌
Já sabemos, se não sabemos vamos sabemos agora, que para renderizarmos um componente ou múltiplos componentes no React JSX/TSX, precisamos englobá-los dentro de um único "invólucro".
Renderização Funcionando 👍
Renderização com Erro 👎
Sabendo dessas nossas premissas iniciais, vamos às abordagens em questão.
<> </>
<Fragment>, comumante empregado com sintaxe <> </> , permite tu agrupar vários componentes em um render sem criar um nó extra, de acordo com nossoa documentação fresquinha.
Do outro lado do ringue, temos a tag <div> , oriunda do html e frequentemente usado para agrupar elementos.
🤼♀️ Em geral, usar React Fragments pode levar a um melhor desempenho, acompanhe:
Velocidade
O elemento<div>cria um nó na DOM e ocupa um certo espaço, mas o<Fragment>nunca cria um nó na DOM e não ocupa espaço, o que torna o aplicativo um pouco mais rápido. Fragment➕1️⃣DOM menos confusa
Ter várias<div>aninhadas faz a DOM se tornar maior e mais difícil de interpretar a leitura, com<Fragment>, essa leitura se torna um facilitada para interpretar e debugar.
Fragment➕1️⃣Estilização
Com o container principal sendo um fragmento, não é possível fazer sua estilização, então avalie sua usabilidade.
Div➕1️⃣
Finalizamos nosso post , mas antes de ir, o código está aqui, e se gostou e fez sentido, não se esqueça de reagir e comentar, isso me motiva muito!
💻 GitHub: cristianmeelo
💼 LinkedIn: Cristian Melo
Top comments (0)