{"id":51765,"date":"2022-05-10T09:04:49","date_gmt":"2022-05-10T07:04:49","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=51765&preview=true&preview_id=51765"},"modified":"2025-01-20T11:36:43","modified_gmt":"2025-01-20T10:36:43","slug":"react-usecallback","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/react-usecallback\/","title":{"rendered":"Aprender a domar useCallback Hook de React"},"content":{"rendered":"

No es ning\u00fan secreto que React.js se ha hecho muy popular<\/a> en los \u00faltimos a\u00f1os. Ahora es la biblioteca JavaScript elegida<\/a> por muchos de los actores m\u00e1s destacados de Internet, como Facebook y WhatsApp.<\/p>\n

Una de las principales razones de su auge fue la introducci\u00f3n de los ganchos en la versi\u00f3n 16.8<\/a>. Los ganchos de React te permiten aprovechar la funcionalidad de React sin tener que escribir componentes de clase. Ahora los componentes funcionales con ganchos se han convertido en la estructura a la que recurren los desarrolladores para trabajar con React.<\/p>\n

En esta entrada del blog, profundizaremos en un gancho espec\u00edfico – useCallback<\/code> – porque toca una parte fundamental de la programaci\u00f3n funcional conocida como memoizaci\u00f3n. Sabr\u00e1s exactamente c\u00f3mo y cu\u00e1ndo utilizar el gancho useCallback<\/code> y aprovechar al m\u00e1ximo sus capacidades de mejora del rendimiento.<\/p>\n

\u00bfPreparado? \u00a1Vamos a sumergirnos!<\/p>\n

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

\u00bfQu\u00e9 es la memoizaci\u00f3n?<\/h2>\n

La memoizaci\u00f3n es cuando una funci\u00f3n compleja almacena su salida para que la pr\u00f3xima vez que se llame con la misma entrada. Es similar al almacenamiento en cach\u00e9<\/a>, pero a un nivel m\u00e1s local. Puede omitir cualquier c\u00e1lculo complejo y devolver la salida m\u00e1s r\u00e1pidamente, ya que est\u00e1 calculada.<\/p>\n

Esto puede tener un efecto significativo en la asignaci\u00f3n de memoria y el rendimiento, y esa tensi\u00f3n es lo que el gancho useCallback<\/code> pretende aliviar.<\/p>\n

UseCallback de React frente a useMemo<\/h3>\n

Llegados a este punto, merece la pena mencionar que useCallback<\/code> se empareja muy bien con otro gancho llamado useMemo<\/code>. Hablaremos de ambos, pero en este art\u00edculo vamos a centrarnos en useCallback<\/code> como tema principal.<\/p>\n

La diferencia clave es que useMemo<\/code> devuelve un valor memoizado, mientras que useCallback<\/code> devuelve una funci\u00f3n memoizada. Esto significa que useMemo<\/code> se utiliza para almacenar un valor calculado, mientras que useCallback<\/code> devuelve una funci\u00f3n que puedes llamar m\u00e1s tarde.<\/p>\n

Estos ganchos te devolver\u00e1n una versi\u00f3n en cach\u00e9 a menos que cambie alguna de sus dependencias (por ejemplo, el estado o las props).<\/p>\n

Veamos las dos funciones en acci\u00f3n:<\/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
El fragmento de c\u00f3digo anterior es un ejemplo artificial, pero muestra la diferencia entre las dos devoluciones de llamada:<\/p>\n
    \n
  1. memoizedValue<\/code> se convertir\u00e1 en la matriz [1, 2, 3, 4, 6, 9]<\/code>. Mientras la variable de valores permanezca, tambi\u00e9n lo har\u00e1 memoizedValue<\/code>, y nunca se volver\u00e1 a calcular.<\/li>\n
  2. memoizedFunction<\/code> ser\u00e1 una funci\u00f3n que devolver\u00e1 el array [1, 2, 3, 4, 6, 9]<\/code>.<\/li>\n<\/ol>\n
    Lo bueno de estas dos devoluciones de llamada es que se almacenan en la cach\u00e9 y permanecen hasta que cambia la matriz de dependencia. Esto significa que, en caso de renderizaci\u00f3n, no se recolectar\u00e1 la basura.<\/p>\n\n
    Renderizaci\u00f3n y React<\/h2>\n
    \u00bfPor qu\u00e9 es importante la memoizaci\u00f3n en React?<\/p>\n
    Tiene que ver con la forma en que React renderiza sus componentes. React utiliza un DOM virtual almacenado en memoria para comparar datos y decidir qu\u00e9 actualizar.<\/p>\n
    El DOM virtual ayuda a React con el rendimiento y mantiene tu aplicaci\u00f3n r\u00e1pida. Por defecto, si cualquier valor de tu componente cambia, todo el componente se volver\u00e1 a renderizar. Esto hace que React sea \u00abreactivo\u00bb a la entrada del usuario y permite que la pantalla se actualice sin recargar la p\u00e1gina.<\/p>\n
    No querr\u00e1s renderizar tu componente porque los cambios no afectar\u00e1n a ese componente. Aqu\u00ed es donde la memoizaci\u00f3n a trav\u00e9s de useCallback<\/code> y useMemo<\/code> resulta \u00fatil.<\/p>\n
    Cuando React vuelve a renderizar tu componente, tambi\u00e9n recrea las funciones que has declarado dentro de tu componente.<\/p>\n
    Ten en cuenta que al comparar la igualdad de una funci\u00f3n con otra funci\u00f3n, siempre ser\u00e1n falsas. Como una funci\u00f3n tambi\u00e9n es un objeto, s\u00f3lo se igualar\u00e1 a s\u00ed misma:<\/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
    En otras palabras, cuando React vuelve a renderizar tu componente, ver\u00e1 cualquier funci\u00f3n declarada en tu componente como una nueva funci\u00f3n.<\/p>\n
    Esto est\u00e1 bien la mayor parte del tiempo, y las funciones simples son f\u00e1ciles de calcular y no afectar\u00e1n al rendimiento. Pero otras veces, cuando no quieras que la funci\u00f3n se vea como una funci\u00f3n nueva, puedes confiar en que useCallback<\/code> te ayuda.<\/p>\n
    Quiz\u00e1 pienses: \u00ab\u00bfCu\u00e1ndo no querr\u00eda que una funci\u00f3n se viera como una funci\u00f3n nueva?\u00bb Bueno, hay ciertos casos en los que useCallback<\/code> tiene m\u00e1s sentido:<\/p>\n
      \n
    1. Est\u00e1s pasando la funci\u00f3n a otro componente que tambi\u00e9n est\u00e1 memoizado (useMemo<\/code>)<\/li>\n
    2. Tu funci\u00f3n tiene un estado interno que necesita recordar<\/li>\n
    3. Tu funci\u00f3n es una dependencia de otro gancho, como useEffect<\/code> por ejemplo<\/li>\n<\/ol>\n
      Ventajas de rendimiento de React useCallback<\/h2>\n
      Cuando useCallback<\/code> se utiliza adecuadamente, puede ayudar a acelerar tu aplicaci\u00f3n y evitar que los componentes se vuelvan a renderizar si no es necesario.<\/p>\n
      Digamos, por ejemplo, que tienes un componente que obtiene una gran cantidad de datos y que es responsable de mostrar esos datos en forma de gr\u00e1fico<\/a>, como \u00e9ste:<\/p>\n
      \n
      \"A
      Gr\u00e1fico de barras generado con un componente React.<\/figcaption><\/figure><\/figure>\n
      Supongamos que el componente principal de tu visualizaci\u00f3n de datos se vuelve a renderizar, pero los cambios de accesorios o de estado no afectan a ese componente. En ese caso, es probable que no quieras o necesites volver a renderizarlo y recuperar todos los datos. Evitar este re-renderizado y refetch puede ahorrar el ancho de banda de tu usuario y proporcionar una experiencia de usuario m\u00e1s fluida.<\/p>\n
      Inconvenientes de React useCallback<\/h2>\n
      Aunque este gancho puede ayudarte a mejorar el rendimiento, tambi\u00e9n tiene sus inconvenientes. Algunas cosas que debes tener en cuenta antes de utilizar useCallback<\/code> (y useMemo<\/code>) son:<\/p>\n