{"id":49249,"date":"2022-05-10T04:05:55","date_gmt":"2022-05-10T07:05:55","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=49249&preview=true&preview_id=49249"},"modified":"2023-08-22T03:33:54","modified_gmt":"2023-08-22T06:33:54","slug":"usecallback-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/usecallback-react\/","title":{"rendered":"Como Usar o Hook useCallback do React"},"content":{"rendered":"

N\u00e3o \u00e9 segredo que o React.js tem se tornado amplamente popular<\/a> nos \u00faltimos anos. \u00c9 agora a biblioteca JavaScript de escolha<\/a> para muitos dos jogadores mais proeminentes da internet, incluindo o Facebook e o WhatsApp.<\/p>\n

Uma das principais raz\u00f5es para sua ascens\u00e3o foi a introdu\u00e7\u00e3o de hooks na vers\u00e3o 16.8<\/a>. Os hooks do React permitem que voc\u00ea utilize a funcionalidade React sem escrever componentes de classe. Agora os componentes funcionais com hooks se tornaram a estrutura de go-to-work dos desenvolvedores para trabalhar com o React.<\/p>\n

Neste artigo do blog, vamos nos aprofundar em um hook espec\u00edfico – useCallback<\/code> – porque ele toca em uma parte fundamental da programa\u00e7\u00e3o funcional conhecida como memoization. Voc\u00ea saber\u00e1 exatamente como e quando utilizar o hook useCallback<\/code> e fazer o melhor de suas capacidades de melhoria de desempenho.<\/p>\n

Pronto? Vamos mergulhar!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 Memoization?<\/h2>\n

Memoization \u00e9 quando uma fun\u00e7\u00e3o complexa armazena sua sa\u00edda para que na pr\u00f3xima vez seja chamada com a mesma entrada. \u00c9 semelhante ao cache<\/a>, mas em um n\u00edvel mais local. Ela pode pular qualquer c\u00e1lculo complexo e retornar a sa\u00edda mais rapidamente, como j\u00e1 est\u00e1 calculado.<\/p>\n

Isso pode ter um efeito significativo na aloca\u00e7\u00e3o e desempenho da mem\u00f3ria, e essa tens\u00e3o \u00e9 o que hook useCallback<\/code> pretende aliviar.<\/p>\n

useCallback vs usarMemo<\/h3>\n

Neste ponto, vale a pena mencionar que useCallback<\/code> se emparelha bem com outro hook chamado useMemo<\/code>. Vamos discutir os dois, mas nesta pe\u00e7a, vamos focar em useCallback<\/code> como o t\u00f3pico principal.<\/p>\n

A diferen\u00e7a chave \u00e9 que useMemo<\/code> retorna um valor memorizado, enquanto useCallback<\/code> retorna uma fun\u00e7\u00e3o memorizada. Isso significa que useMemo<\/code> \u00e9 usado para armazenar um valor computado, enquanto useCallback<\/code> retorna uma fun\u00e7\u00e3o que voc\u00ea pode chamar mais tarde.<\/p>\n

Estes hooks lhe devolver\u00e3o uma vers\u00e3o em cache a menos que uma de suas depend\u00eancias (por exemplo, estado ou adere\u00e7os) mude.<\/p>\n

Vamos dar uma olhada nas duas fun\u00e7\u00f5es em a\u00e7\u00e3o:<\/p>\n

import { useMemo, useCallback } from 'react'\nconst values = [3, 9, 6, 4, 2, 1]\n\n\/\/ This will always return the same value, a sorted array. Once the values array changes then this will recompute.\nconst memoizedValue = useMemo(() => values.sort(), [values])\n\n\/\/ This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.\nconst memoizedFunction = useCallback(() => values.sort(), [values])<\/code><\/pre>\n
O trecho de c\u00f3digo acima \u00e9 um exemplo elaborado, mas mostra a diferen\u00e7a entre os dois callbacks:<\/p>\n
    \n
  1. memoizedValue<\/code> se tornar\u00e1 a matriz [1, 2, 3, 4, 6, 9]<\/code>. Enquanto a vari\u00e1vel de valores permanecer, o mesmo acontecer\u00e1 com memoizedValue<\/code>, e ela nunca mais ser\u00e1 recalculada.<\/li>\n
  2. memoizedFunction<\/code> ser\u00e1 uma fun\u00e7\u00e3o que retornar\u00e1 o array [1, 2, 3, 4, 6, 9]<\/code>.<\/li>\n<\/ol>\n
    O que \u00e9 \u00f3timo nessas duas liga\u00e7\u00f5es \u00e9 que elas ficam em cache e ficam penduradas at\u00e9 que a matriz de depend\u00eancia mude. Isto significa que em um renderizador, eles n\u00e3o receber\u00e3o lixo coletado.<\/p>\n\n
    Rendering e React<\/h2>\n
    Por que a memoriza\u00e7\u00e3o \u00e9 importante quando se trata do React?<\/p>\n
    Tem a ver com a forma como o React torna seus componentes. React usa um DOM Virtual armazenado na mem\u00f3ria para comparar dados e decidir o que atualizar.<\/p>\n
    O DOM virtual ajuda o React com desempenho e mant\u00e9m sua aplica\u00e7\u00e3o r\u00e1pida. Por padr\u00e3o, se algum valor em seu componente mudar, o componente inteiro ser\u00e1 renderizado novamente. Isso torna o React “reativo” \u00e0 entrada do usu\u00e1rio e permite que a tela seja atualizada sem recarregar a p\u00e1gina.<\/p>\n
    Voc\u00ea n\u00e3o quer renderizar o seu componente porque as mudan\u00e7as n\u00e3o afetar\u00e3o esse componente. Aqui \u00e9 onde a memoriza\u00e7\u00e3o atrav\u00e9s de useCallback<\/code> e useMemo<\/code> vem a calhar.<\/p>\n
    Quando o React religa o seu componente, ele tamb\u00e9m recria as fun\u00e7\u00f5es que voc\u00ea declarou dentro do seu componente.<\/p>\n
    Note que ao comparar a igualdade de uma fun\u00e7\u00e3o com outra fun\u00e7\u00e3o, elas sempre ser\u00e3o falsas. Como uma fun\u00e7\u00e3o tamb\u00e9m \u00e9 um objeto, ela s\u00f3 ser\u00e1 igual a si mesma:<\/p>\n
    \/\/ these variables contain the exact same function but they are not equal\nconst hello = () => console.log('Hello Matt')\nconst hello2 = () => console.log('Hello Matt')\n\nhello === hello2 \/\/ false\nhello === hello \/\/ true<\/code><\/pre>\n
    Em outras palavras, quando o React re-entrega seu componente, ele ver\u00e1 quaisquer fun\u00e7\u00f5es que s\u00e3o declaradas em seu componente como sendo novas fun\u00e7\u00f5es.<\/p>\n
    Isto \u00e9 bom na maioria das vezes, e fun\u00e7\u00f5es simples s\u00e3o f\u00e1ceis de computar e n\u00e3o ter\u00e3o impacto no desempenho. Mas as outras vezes quando voc\u00ea n\u00e3o quer que a fun\u00e7\u00e3o seja vista como uma nova fun\u00e7\u00e3o, voc\u00ea pode confiar em useCallback<\/code> para ajud\u00e1-lo.<\/p>\n
    Voc\u00ea pode estar pensando: “Quando eu n\u00e3o gostaria que uma fun\u00e7\u00e3o fosse vista como uma nova fun\u00e7\u00e3o? Bem, h\u00e1 certos casos em que useCallback<\/code> faz mais sentido:<\/p>\n
      \n
    1. Voc\u00ea est\u00e1 passando a fun\u00e7\u00e3o para outro componente que tamb\u00e9m \u00e9 memorizado (useMemo<\/code>)<\/li>\n
    2. Sua fun\u00e7\u00e3o tem um estado interno que precisa ser lembrado<\/li>\n
    3. Sua fun\u00e7\u00e3o \u00e9 uma depend\u00eancia de outro hook, como useEffect<\/code> por exemplo<\/li>\n<\/ol>\n
      Benef\u00edcios de performance do useCallback<\/h2>\n
      Quando useCallback<\/code> \u00e9 usado apropriadamente, ele pode ajudar a acelerar o seu aplicativo e evitar que os componentes voltem a renderizar se eles n\u00e3o precisarem.<\/p>\n
      Suponha, por exemplo, que voc\u00ea tem um componente que recupera uma grande quantidade de dados e \u00e9 respons\u00e1vel por exibir esses dados na forma de um gr\u00e1fico ou diagrama<\/a>, como este aqui:<\/p>\n
      \n
      \"Gr\u00e1fico
      Gr\u00e1fico de barras gerado usando um componente React<\/figcaption><\/figure><\/figure>\n
      Suponha que o componente principal para a sua visualiza\u00e7\u00e3o de dados seja o componente que voc\u00ea reapresenta, mas os adere\u00e7os ou estado alterados n\u00e3o afetam esse componente. Nesse caso, voc\u00ea provavelmente n\u00e3o quer ou precisa renderiz\u00e1-lo e recuperar todos os dados. Evitar esta renderiza\u00e7\u00e3o e a restaura\u00e7\u00e3o pode economizar a largura de banda do seu usu\u00e1rio e proporcionar uma experi\u00eancia mais suave para o usu\u00e1rio.<\/p>\n
      Desvantagens do useCallback<\/h2>\n
      Embora este hook possa ajud\u00e1-lo a melhorar seu desempenho, ele tamb\u00e9m vem com suas armadilhas. Algumas coisas a considerar antes de usar useCallback<\/code> (e useMemo<\/code>) s\u00e3o:<\/p>\n