Cuándo usar useMemo y useCallback: una breve guía para los fans de React

Si es un desarrollador de React, es posible que ya se haya topado con discusiones en línea de React useMemo vs useCallback y haya terminado más confundido que nunca. Puede ser muy difícil descubrir la diferencia entre useMemo y useCallback. ¡Está bien! Puede ser difícil entender los React-Hooks al principio, pero pueden ser extremadamente útiles en el futuro.

En este artículo, le mostraremos la diferencia entre useCallback y useMemo y cuándo usar useCallback y useMemo.

La diferencia entre useMemo y useCallback

Se introdujeron dos ganchos integrados con React 16.8. Estas características se introdujeron para optimizar el rendimiento. La diferencia entre useMemo y useCallback parece insignificante, por lo que intentaremos aclarar la confusión.

¿Qué son los ganchos de reacción?

Los ganchos son nuevas funciones introducidas en React que permiten usar el estado y otras funciones de React sin escribir una clase. Los ganchos son métodos y funciones que se "enganchan" a las funciones de estado y ciclo de vida de React.

useCallback vs useMemo

El enlace useCallback se usa cada vez que un componente secundario se vuelve a renderizar una y otra vez sin realmente necesitarlo. Cuando usa useCallback, puede evitar esta nueva representación innecesaria devolviendo la misma instancia de esa función que se está pasando en lugar de crear una nueva instancia cada vez. Esto puede ahorrar una cantidad considerable de tiempo (y dinero gastado en horas de desarrollo). Pasar una matriz de dependencias con una devolución de llamada memorizada dará como resultado una versión memorizada que solo se cambiará cuando cambie la dependencia.

useMemo se usa en el componente funcional de React. Se utiliza para devolver un valor memorizado. La memorización se refiere al proceso de ahorrar tiempo de recompilación al devolver un resultado almacenado en caché en lugar de volver a compilar una función con el mismo argumento para la próxima ejecución. El resultado almacenado en caché se devuelve la próxima vez que se llama. Los ganchos useMemo proporcionan valores asignados a la memoria.

Claramente, hay algunas similitudes. Tanto en useMemo como en useCallback, el enlace acepta una función, así como una serie de dependencias. Sin embargo, useCallback recordará el valor devuelto y useMemo recordará la función. En otras palabras, uno almacena en caché un tipo de valor y el otro almacena en caché una función.

• LEER MÁS: cómo y por qué debe mantener sus archivos organizados
• Las 9 mejores formas de hacer uso de los dispositivos electrónicos en el aula

Cuándo usar useCallback vs useMemo

Entonces, ¿cuándo debería usar useCallback y cuándo useMemo es la mejor opción? Veamos un ejemplo. Si un código computacionalmente pesado y costoso acepta argumentos y devuelve un valor, useMemo es la mejor opción. De esa manera, puede seguir haciendo referencia al valor entre los renderizados sin volver a ejecutar el código y perder su tiempo y poder de cómputo.

Si necesita mantener una instancia de función persistente en múltiples representaciones, debe usar useCallback en su lugar porque esencialmente coloca la función fuera del alcance de su componente React para mantenerla intacta.

¿Qué es el efecto de uso?

Ya mencionamos la matriz de dependencia, que puede haber encontrado cuando usa useEffect. useEffect es otro gancho de React. Se utiliza para controlar los efectos secundarios en los componentes funcionales mediante la lógica del argumento de devolución de llamada. Las dependencias son la lista de dependencias del efecto secundario, por ejemplo, accesorios o valores de estado.

Este gancho le muestra a React que el componente necesita realizar una acción después de renderizar. Cuando se actualice el DOM, se almacenará el efecto que pase. También puede realizar la obtención de datos para lograr este resultado.

En resumen, useCallback, useMemo y useEffect se preocupan por mejorar el rendimiento entre la reproducción de componentes en aplicaciones React.

Sin embargo, es importante no abusar de los ganchos. Los ganchos introducen una lógica nueva y compleja, y podría tener el efecto contrario al previsto, creando problemas de rendimiento en lugar de resolverlos. useMemo solo debe usarse para cálculos realmente costosos.

No use useMemo o useCallback para solucionar problemas fundamentales con su aplicación. Eventualmente, estos problemas resurgirán y lo perseguirán, así que mejor atienda primero cualquier falla conocida.

• LEER MÁS – Cómo elegir el mejor CMS
• ¿Cuáles son los pros y los contras de los métodos criptográficos?

Conclusión

Con suerte, este artículo fue revelador y usted comprende mejor los dos ganchos. En resumen:

• Ambos aceptan una función y una matriz de dependencias.
• useMemo memoriza el valor devuelto, useCallback memoriza la función.

¡La diferencia entre useMemo y useCallback es bastante clara! Estas herramientas tienen el potencial de ahorrar tiempo y dinero, pero solo si se utilizan en el contexto y entorno adecuados.

Espero que este tutorial te haya ayudado a conocer Cuándo usar useMemo y useCallback: una guía breve para fanáticos de React . Si quieres decir algo, háznoslo saber a través de las secciones de comentarios. Si le gusta este artículo, compártalo y siga a WhatVwant en Facebook, Twitter y YouTube para obtener más consejos técnicos.

Cuándo usar useMemo y useCallback – Preguntas frecuentes