Nesse Módulos iremos abordar performance e testes unitários dentro do React/Next.

Aula 01 - Performando apps com ReactJS

Uma preocupação comum no desenvolvimento de aplicações web é a performance e, por isso, nesse módulo entenderemos como performar aplicações com React entendendo como funcionam os algoritmos internos da biblioteca e todo fluxo de renderização de componentes.

Renderizações

Uma renderização no React é o fluxo de comparação entre uma nova versão com uma versão antiga de um componente.

Existem algumas formas de ocorrer novas renderizações:

• Pai para filho - sempre que o componente Pai alterar, o componente Filho será renderizado novamente.

<Parent> <!-- Sempre que ocorrer uma mudança dentro do componente Pai, o Filho muda -->
	<Children>
</Parent>

• Propriedade - sempre que uma propriedade alterar, o componente será renderizado novamente

<Component prop="prop" />

• Hooks - sempre que um hook que armazena um estado (state, reducer, context) é alterado, o componente é renderizado.

<ContextProvider>
	<Component />
</ContextProvider>

Fluxo de renderização

1. Gerar uma nova versão do componente que precisa ser renderizado;
2. Comparar essa nova versão com a versão anterior já salva na página;
3. Se houverem alterações, o React renderiza essa nova versão em tela.

Reconciliação