React: otimizando a performance

Entendendo a estrutura - Apresentação

Olá, boas-vindas ao curso de React: otimizando a performance. Aqui nesse curso, vamos aprender como conseguimos ver se algo está sendo renderizado de forma desnecessária e resolver esses problemas.

Primeiramente, antes de tudo, vamos entender como o React faz uma renderização, como funciona a estrutura, a árvore de componente React na prática. Então vamos dar uma lida, vai ser bem legal. Vamos falar sobre coisas como virtual Dom, reconciliação, imutabilidade. Por que o React é imutável? E o que é imutabilidade. Vamos ver sobre isso também.

Vamos ver como utilizar o Memo e o Use Memo. Vamos ver como utilizar o React Developer Tools, para vermos essas renderizações acontecendo, e como utilizar várias opções do React Developer Tools para ver uma linha do tempo de renderizações. Olha que coisa interessante.

Também vamos ver que em tempo de build, quando geramos um build do nosso arquivo. Chegando na reta final, antes de levarmos para a produção o nosso arquivo, vamos ver na hora de gerar o build, que se não utilizarmos renderizações dinâmicas, renderizações preguiçosas, lazy loading, dynamic imports, todo esse tipo de coisa, geramos apenas um arquivo JS, e vamos ver como resolver isso também.

Então, olha que interessante. Espero que você se interesse por esse assunto, porque esse é um assunto que diferencia muito desenvolvedores medianos de React, para desenvolvedores que realmente sabem o que estão fazendo. Então, espero que você se interesse por esse assunto e eu te vejo no curso. Até lá.

Entendendo a estrutura - O que é JSX

Para começarmos essa viagem de performance e conseguirmos entender bem a fundo como o React funciona, eu quero te chamar para fazer essa viagem junto, para conseguirmos fazer uma desestruturação, conseguirmos ver de forma reversa como o React funciona. Então, vamos lá.

Primeiro, eu vou abrir o cardápio, que é uma das páginas que temos, então eu abri “SRC > pages > cardapio > index.tsx”. Até esse ponto já sabemos, porque fizemos isso juntos, esse componente, e ele tem 3 states que são compartilhados entre os filhos. Ele tem alguns imports, o export dele é uma função que chamamos de cardápio e o retorno dele é um elemento DOM, podemos chamar assim.

Só que por trás do código não é bem assim. O retorno dele, para começarmos a explorar. O return dele não é um elemento DOM, nós chamamos ele de JSX. Você provavelmente já deve saber que é um JSX, só que muita gente não sabe o que é, para que ele funciona, por que tem esse nome.

Então, vamos começar por aí, para começarmos a adentrar o React. Então, eu vou abrir o meu navegador. Antes de qualquer outra coisa, dentro desse curso, eu gostaria que você instalasse a extensão React Developer Tools, porque ele permite conseguirmos mostrar, porque ele brilha em verde, quando um componente renderiza e atualiza na tela.

Então vamos precisar utilizá-lo no curso. Fica de conselho. Agora, eu já tenho a documentação do React aberta, dizendo o que é JSX.

Ele está dizendo que é chamado JSX, que é uma extensão de sintaxe para JavaScript, e ele permite conseguirmos utilizar o JS, o JavaScript, junto com o X, que é de XML. Então, você não precisa adentrar em XML, mas basicamente é a forma como escrevemos elementos do HTML, que na verdade é um XHTML por debaixo dos panos. Enfim, não vou entrar em detalhes, mas ele é como escrevemos a tag HTML junto com JavaScript.

Então, por isso, se voltarmos para o código, conseguimos escrever dessa forma, que o <h3>, que é um elemento HTML, tem um className, e o no meio do className colocamos um JavaScript. Isso é o JSX que permite.

Só que essa é uma das formas de conseguirmos escrever os elementos React de forma mais bonita. Por debaixo dos panos, se descermos mais um pouco na documentação, o que ele diz?

Ele está dizendo que o JSX representa objetos. Então, o Babel, que é um compilador de React, de qualquer coisa JavaScript para coisas que os navegadores entendem, ele compila esse JSX para uma coisa chamada React.createElement. Então esse elemento, que nada mais é do que um <h1> com uma classe chamada "greeting" na qual está escrito “Hello World”.

E o que o Babel compila? Ele compila no React.createElement, ele coloca o <h1> como primeiro parâmetro. O segundo parâmetro é o className, que colocamos, que tem o nome de "greeting", e o terceiro é o children, que é o "Hello, world!". E no final das contas, esse React.createElement é esse objeto que diz que o type é h1, e que ele tem a prop className: "greeting", e a prop children:"Hello, world!".

E ficamos nos perguntando que isso é uma coisa muito baixo nível, uma coisa que não vamos utilizar, uma coisa que não precisamos entender, e eu vou te mostrar que esse pensamento está errado. Eu vou entrar no VS Code, e vamos colocar no “routes.tsx”.

Vamos tentar dar um console.log no cardápio, para ver se conseguimos ver alguma coisa. Então vou colocar console.log(Cardapio); e vamos ver. Dei um “Ctrl + S”, vou voltar para o navegador, vou voltar para o nosso Aluroni, inspecionar e vamos ver. Aparece que ele é uma função, isso já sabemos, que retorna alguma coisa.

Então ainda não conseguimos ter nenhum retorno. Então, voltei para o VS Code, ao invés disso, eu vou executá-lo como se fosse o JSX, como se fosse uma tag. Vamos ver o que ele faz.

Ele já me mostra que ele é um objeto, esse typeof você não precisa entender muito tempo, isso é uma coisa um pouco mais profunda do React. Ele tem um props, ele tem um key e um ref, que provavelmente você já deve ter visto em algum lugar, o key nós usamos bastante quando estamos trabalhando com listas. O ref eu não vou entrar muito em detalhes agora. E tem as props, que não conseguimos achar, que não conseguimos pegar.

E ele tem mais algumas coisas, mas já conseguimos ver que a parte de dentro do JSX sempre retorna esse objeto do mesmo jeito que estava dizendo na documentação. Tem uma forma melhor ainda para conseguirmos ver essas coisas. Eu voltei para o VS Code, tirei o formato de tag, só deixei cardápio, e eu vou executá-lo como se fosse uma função.

Então eu executei, vou voltar e, olha que legal, eu vou fechar o objeto que tinha antes, vou abrir o novo e agora ele mostra o prop correto.

Então ele mostra que tem 4 children, então um children é o h3, que é o cardápio, o outro children é o buscador, o outro children é o filtro, a div com o filtro e o ordenar por, e o terceiro é os itens desse cardápio.

Então, eu vou abrir o terceiro, vamos ver se conseguimos extrair alguma informação. Acho que não vamos conseguir extrair muito desse ponto. Só que o que isso mostra? Que tudo isso são objetos. Por debaixo dos panos o React sempre trata tudo como objeto, e ele sempre consegue fazer essas comparações com o objeto.

Eu falei que ele fez comparações. É isso mesmo, ele faz comparação. E por que ele faz comparação? Porque ele precisa atualizar os componentes quando um state muda, quando um prop muda, quando alguma coisa muda. E qual é o sentido core, qual é o núcleo, o que nos faz pensar sobre performance em React?

É justamente ele renderizar de forma desnecessária, evitarmos que ele renderize de forma desnecessária. Então, é isso que precisamos evitar, e é por isso que precisamos entender bem a fundo como o React funciona, como ele trata esses objetos, como são esses objetos, para conseguirmos entender como evitar essas renderizações.

Nos próximos vídeo vamos começar a entrar nisso, vamos começar a entender muito mais sobre o pacote React DOM, que é o pacote que faz essas comparações, vamos ver mais a fundo, e vamos conseguir extrair algumas informações, para conseguirmos deixar o nosso Aluroni ainda mais performático. Então, te vejo nos próximos vídeos.

Lista de arquivos abordados no vídeo:

• src/routes.tsx

Entendendo a estrutura - Entendendo a estrutura React

Você entendeu, com esse JSX, como um componente se transforma em um objeto no final das contas. Vamos começar a subir um pouco na hierarquia e entender como funciona essa hierarquia de componentes, essa estrutura de componentes do React. Então vamos lá.

Eu vou voltar no VS Code e já estamos em um router, que já está um pouco acima. Tem vários filhos embaixo dele, mas já é um lugar legal para vermos. O que conseguimos ver? Conseguimos ver que o router é um componente, e esse componente não é que tem vários filhos, o filho dele é routes, dentro do router tem o routes, e esse routes tem o menu routes, o footer, que compõe a tela. Só que o routes fica mudando entre esses componentes, entre o componente de "cardápio", entre o componente "sobre", o componente "início", o componente "prato" e o "NotFound".

Ele fica trocando entre eles nessa hierarquia, então o cardápio tem itens, tem buscadores, então conseguimos ver toda uma árvore desses componentes. Conseguimos imaginar como se fosse realmente uma estrutura DOM do HTML e conseguimos chegar no router.

E depois do router, o arquivo que vem é o arquivo “index.tsx”, que falamos que é o root da aplicação. Se clicarmos nesse “index.tsx”, ele nada mais tem do que esse React.StrictMode, que não vamos entrar em detalhes. Só que uma coisa muito importante que temos que ver, é que ele tem um pacote chamado ReactDOM e ele tem uma função dentro desse pacote, chamado render, então é ReactDOM.render.

O que esse ReactDOM faz? Eu já expliquei um pouco, com menos detalhes, em um curso anterior, mas ele nada mais faz do que interpretar esses componentes do React. Ele transforma em todos aqueles objetos que vimos e ele consegue injetar em um elemento que escolhemos. Então o primeiro argumento ou parâmetro dessa função é o componente que queremos que renderize e o segundo argumento ou parâmetro é o elemento que queremos que o ReactDOM injete.

Dessa forma ele consegue entender, consegue injetar o React corretamente, consegue interpretar e compilar como se fosse um elemento HTML em si. Ele transforma em um elemento real, em um DOM real, como chamamos.

Então, conseguimos ver essa arquitetura, e vamos começar a falar um pouco sobre alguns termos, para você ir se familiarizando.

Primeiro, falando sobre React DOM, ele é um pacote que, normalmente quando você utiliza para o React App, quando você quer utilizar o React no navegador, na web, você utiliza normalmente o ReactDOM. Eu não sei se tem outros pacotes, não coloco minha mão no fogo para dizer que não tem outros pacotes, mas o ReactDOM é um pacote que o próprio React recomenda, e que o próprio Facebook criou, para você conseguir injetar componente React no navegador. Então eu vou falar sobre o ReactDOM.

O ReactDOM tem várias funções, inclusive o render que eu comentei com você. Enfim, é esse detalhe que ele dá, então ele que é o responsável para fazer essa injeção. Só que eu falei para você que ele só aceita um componente, que é o router, que colocamos. Então o ReactDOM recebe toda essa árvore que eu comentei com você antes, ele recebe toda essa árvore para ele conseguir lidar com os componentes.

Já podemos entender sobre isso: o React, ao invés de ficar tentando analisar para tentar ver o que mudou ou não mudou, que ia ter um processamento muito grande, ele destrói tudo, no caso, esse router. Eu vou explicar com mais detalhes depois. Esse router está com um menu, ele está com o footer, esse tipo de coisa, só que quando muda alguma coisa dentro, ele destrói tudo e constrói tudo de novo. Ele meio que muda todos os componentes de um lado e coloca todos os componentes do outro.

Como o React consegue fazer isso de forma tão performática, porque o nosso app Aluroni está sendo muito performático, ele está com muita coisa sendo executada ao mesmo tempo em que ele faz essa mudança. Como ele faz isso? Como conseguimos entender como o React faz essa mudança de renderização, esse update? É isso que vamos entender nos próximos vídeos. Te vejo lá.

Lista de arquivos abordados no vídeo:

• src/routes.tsx
• src/index.tsx

Sobre o curso React: otimizando a performance

O curso React: otimizando a performance possui 138 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo a estrutura
• Memoização
• Memo em listas
• Analisando o cardápio
• Performance entre telas