Igualdade Referencial

Olá a todos, bem-vindos de volta ao meu blog .
Espero que estejam bem e que este blog vos encontre de boa saúde ❤️.

Introdução

Para começar com nosso tópico principal, ou seja, useCallback e memo, precisamos entender o termo Igualdade Referencial.

Igualdade referencial em termos simples, se dois objetos compartilham a mesma referência,
então eles são iguais.
Geralmente '===' verifica a igualdade referencial entre dois elementos em Javascript.

Ok!!
Mas, qual é a conexão entre isso e nosso tópico principal ?

Aguarde, vamos conhecê-lo claramente neste blog.

Antes de começar com o tópico, este blog pressupõe que o leitor tenha um bom entendimento do React.

useCallback

Sabemos que, no React, se o estado mudar, ele renderizará o componente e renderizar significa que tudo será recriado no componente.
Embora o React não renderize novamente o DOM completamente, apenas os elementos alterados do DOM são renderizados novamente.

Digamos que temos uma função dentro do componente

No código acima, temos um pureFn()que retorna um objeto. Permanece o mesmo até versionmudanças. Portanto, não precisamos exigir que ele seja recriado toda vez que o componente for renderizado novamente.

Então, como podemos evitar essas coisas no React?
Sim, temos o gancho useCallback para lidar com isso.

Isso é ótimo!!!

Mas como usá-lo?

A sintaxe é exatamente a mesma do gancho useEffect()
useCallback(fn, dependencyArray)

O hook useCallback() diz ao React para não criar a função a menos que a versão mude.

Em palavras simples, useCallback armazenará em cache a função interna e, a cada nova renderização, retornará a função em cache até que a versão seja alterada.

Nota: não para de criar a função, mas o React a ignora e devolve uma função em cache se houver alguma mudança de dependência.useCallback

Memorando

Agora que vimos como useCallback nos ajuda a memorizar qualquer função, temos algo semelhante para um componente completo?

Temos um componente pai que contém um componente filho. digamos que, se atualizarmos um estado no pai, ele renderizará pai e filho, mesmo que esse estado não esteja relacionado ao filho de forma alguma.

Portanto, para evitar tais re-renderizações, temos um memoreact que ajuda a memorizar todo o componente e permite re-renderizações quando apenas os respectivos props são alterados.

Portanto, evitamos a renderização desnecessária dos componentes usandomemo

Agora, vamos voltar à igualdade referencial . Como já mencionado, o React recriará tudo quando for renderizado. Durante essa renderização, todas as referências são apagadas e criadas novas referências.

useCallback()e memodirá ao React para pular a nova renderização para as respectivas funções e componentes. Memoisationé uma técnica para otimização de desempenho.

Referências

• Código para os trechos acima
• useCallback
• memorando

Para mais conteúdo emocionante no Frontend, por favor, siga-me .

Muito obrigado a todos .
Até a próxima,
bom aprendizado ✍️

Abhishek Kovuri , desenvolvedor de interface do usuário