Otimizando performance no ReactJS - ReactRouter

O problema

Quando nossa aplicação é carregada pela primeira vez, muitas vezes estilos e componentes que não precisariam estar carregando naquele momento são renderizados. Isso faz com que recursos que não estão sendo usados sejam chamados. Em aplicações simples pode ser que você não tenha problemas de desempenho por conta disso, mas imagine uma aplicação de grande porte carregando diversas coisas ao mesmo tempo e que muitas dessas coisas não vão ser usadas naquele momento.

Como por exemplo a imagem a seguir:

A aplicação renderiza os estilos do componente Cardapio que não é usado naquele momento, esse componente nesse nosso caso só vai ser renderizado quando a rota equivalente for acessada.

Como podemos resolver

1 - React Lazy (Imports dinamicos)

Permite adiar o carregamento do código do componente até que ele seja renderizado pela primeira vez. Aplicando esse conceito, nosso código ficaria assim:

E o que ele faz? De forma resumida, ele permite que o componente dentro do lazy possa ser carregado quando for chamado e não mais necessariamente renderizado logo de cara. E quando ele renderizar pela primeira vez ficará na memória e não precisar ficar sendo renderizado toda hora.

Porém dessa forma ele ainda esta fazendo algo que pode ser melhorado, nesse esquema o Footer e o Menu ainda estão sento destruidos e montados novamente quando renderiza o componente Cardapio, como eles não mudam e ja foram carregados inicialmente precisamos fazer com que eles se mantenham, e para isso podemos fazer como no exemplo e simplemente tirar o menu e o footer de dentro o suspense.

É uma funcionalidade muito util para que consigamos melhor desempenho nas nossas aplicações. Mas assim como o memo não é sempre que deve ser feita e deve ter uma análise previa para melhor implmentação no seu projeto.

E segue link da doc para quem quiser entender ainda mais sobre o assunto: https://react.dev/reference/react/lazy e https://react.dev/reference/react/Suspense