Você deve ter ouvido isso muitas vezes que devemos memorizar as funções de retorno de chamada usando useCallback () para evitar uma nova renderização inútil de componentes.

Mas o que exatamente é useCallback () 🤔 . Você já pensou nisso?

Deixe-me ajudá-lo a entender o que é e onde usá-lo corretamente.

Vamos primeiro entender as verificações de igualdade de funções

Antes de ver como o usamos, vamos ver o que ele resolve. Vamos escrever uma função simples que retorna uma função:

mul1 e mul2 são funções que multiplicam dois números. Eles foram criados pela função multiplicar .

As funções em JavaScript são o objeto regular. As funções mul1 e mul2 compartilham o mesmo código, mas são objetos de função diferentes. Compará-los é avaliado como falso .

É assim que os objetos JavaScript funcionam. Um objeto (incluindo um objeto de função) é igual apenas a si mesmo.

Agora, o objetivo de useCallback ()

React.useCallback () basicamente resolve a verificação de igualdade das funções que vimos acima. Diferentes objetos de função que compartilham o mesmo código são frequentemente criados dentro dos componentes React:

handleClick (função embutida) é um objeto de função diferente em cada renderização de CustomComponent .

E não há mal nenhum em ter funções declaradas in-line com React Components. Não terá um impacto prejudicial no desempenho.

Mas, em alguns casos, você precisa manter uma única instância de função entre as renderizações:

1. Como quando a função tem algum estado interno, por exemplo, quando a função é depurada / estrangulada

2. Um componente funcional dentro dele React.memo()aceita um objeto de função prop.

Se um componente filho que aceita um retorno de chamada depende de uma verificação de igualdade referencial (por exemplo: React.memo () ou shouldComponentUpdate () ) para evitar re-renderizações desnecessárias quando seus adereços mudam, então é importante que nenhum adereço de retorno de chamada mude entre renderiza.

Portanto, no componente pai, podemos envolver a prop de retorno de chamada em useCallback () e garantir que ele está passando o mesmo objeto de função para o componente filho otimizado.

3. Quando o objeto de função é uma dependência de outros ganchos, por exemplo useEffect(..., [callback])

No exemplo acima, se myFunction faz algo que faz com que MyComponent seja reconstruído (por exemplo, se ele faz algo que muda os adereços ou o estado), você entrará em um estado de loop infinito.

Para evitar isso, envolvemos useCallback () em torno de uma função e definimos suas dependências para garantir que a função só seja recriada se suas dependências forem alteradas. Portanto, a função não é mais declarada em cada ciclo de renderização

Portanto, os casos de uso acima são quando, o gancho useCallback é útil: dados os mesmos valores de dependência, o gancho retorna a mesma instância de função entre as renderizações e aumenta o desempenho.

Espero que tenha ajudado você a entender o que realmente é useCallback ()! 😊

Obrigado por ler este artigo. Se você gostou, fique à vontade para clicar no botão 👏 para ajudar outras pessoas a encontrá-lo.