Aprenda el método correcto para usar Callback y useMemo ¿Eres un desarrollador de React? ¡Sí! Entonces, este blog es de preferencia para ti. Hoy, vamos a compartir una guía completa sobre React-Hooks. En la última versión de , se introducen dos ganchos integrados o nuevas funciones para optimizar el rendimiento, como . React 16.8 useCallback y useMemo Muchos pueden sentirse bastante confundidos acerca de la diferencia entre useCallBack y useMemo. ¿Por qué useMemo y useCallback esperan una función? No se preocupe si tiene la misma consulta o inquietud sobre React-Hooks. Aquí estamos tratando de compartir la mejor y más precisa información. Espero que encuentres tus soluciones aquí. programadores de reacción Empecemos. ¿Qué son los ganchos de reacción? Los ganchos son básicamente una nueva característica introducida en React 16.8; permite useState y otras características de React sin escribir una sola clase. Los ganchos son métodos y funciones que pueden "engancharse" a las funciones de estado y ciclo de vida de React. ¿Qué es useCallback? El enlace useCallback se usa cuando un componente secundario se vuelve a representar una y otra vez sin necesidad. Propósito de usoCallback Al usar useCallback, puede evitar volver a renderizar componentes innecesariamente al devolver la misma instancia de la función que se pasa en lugar de crear una nueva cada vez. El uso de enlaces useCallback es útil cuando un componente secundario se representa una y otra vez sin necesidad de hacerlo. Pasar una matriz de dependencias y una devolución de llamada conmemorativa dará como resultado una versión memorizada de la devolución de llamada que solo se modifica cuando cambia cualquier dependencia. Sintaxis de useCallback: const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); ¿Qué es useMemo? El gancho useMemo se usa en el componente funcional de React para devolver un valor memorizado. Propósito de usoMemo En informática, la memoización es un concepto que se usa en general cuando podemos ahorrar tiempo de recompilación al devolver el resultado almacenado en caché. En el , los ganchos useMemo proporcionan valores asignados a la memoria. componente funcional de React Usar useMemo cuando se trata de muy poco procesamiento no es realmente inteligente. En casos con muy poco procesamiento, su uso podría agregar una sobrecarga adicional. Sin embargo, useMemo funciona bien para evitar una renderización adicional innecesaria. Ahora, debe preguntarse qué es la memorización en React-Hooks. Memoización La memorización se refiere al concepto de no volver a compilar una función con el mismo argumento para la próxima ejecución porque devuelve el resultado almacenado en caché la próxima vez que se llama. En este punto, debe tener una comprensión mejor o más clara de : useCallback y useMemo. Además, el propósito y el uso de ambos. Ahora, avancemos con el siguiente tema de discusión. React-Hooks A primera vista, puede parecer que el uso de useCallback y useMemo es bastante similar, sin embargo, no lo es. Por lo tanto, hay muchas posibilidades de confundirse acerca de cuándo utilizar useCallback y useMemo. Para eliminar toda la confusión sobre useCallback y useMemo, echemos un vistazo a la diferencia entre ambos ganchos. Sintaxis de useMemo: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); Diferencia entre useMemo y useCallback Tanto en useMemo como en useCallback, el enlace acepta una función y una serie de dependencias. La principal diferencia entre useCallback y useMemo es que useCallback memorizará el valor devuelto, mientras que useMemo memorizará la función. Esencialmente, la única diferencia entre estos ganchos es que uno almacena en caché un tipo de valor y el otro almacena en caché una función. Tomemos un ejemplo; si el código computacionalmente costoso acepta argumentos y devuelve un valor, necesitará usar useMemo para poder seguir haciendo referencia a ese valor entre representaciones sin volver a ejecutar el código computacionalmente costoso. Por otro lado, para mantener una instancia de función persistente para múltiples representaciones, se necesita useCallback. Esto es como colocar una función fuera del alcance de su componente de reacción para mantenerlo intacto. ¿De qué manera funciona la matriz de dependencias con estos ganchos? Es posible que esté familiarizado con la matriz de dependencia: useMemo y useCallback si alguna vez ha usado React-Hook useEffect. Sin embargo, si no está familiarizado con el término, no se preocupe. Explicaremos qué significa useEffect. efecto de uso El gancho useEffect se usa para manejar efectos secundarios en componentes funcionales. El argumento de devolución de llamada es la lógica que se utilizará. Dependencias es una lista de dependencias del efecto secundario: ser accesorios o valores de estado. (devolución de llamada, dependencias) Usando este Hook, le dices a React que tu componente necesita realizar alguna acción después de renderizar. Cuando React actualiza el DOM, almacena el efecto que pasa (lo llamaremos "efecto"). También podemos realizar la obtención de datos o llamar a otra API imperativa para lograr este resultado, así como establecer el título del documento. Sintaxis de useEffect: useEffect(() => { const subscription = props.source.subscribe(); return () => { // Clean up the subscription subscription.unsubscribe(); }; }); Ahora, pasemos a cómo funciona la matriz de dependencias con estos ganchos. Los métodos useCallback, useMemo y useEffect son formas de mejorar el rendimiento entre la reproducción de componentes en aplicaciones basadas en React. Estas funciones controlan algunas de las funciones que ofrecen los componentes basados en clases, como la persistencia de estados dedicados a través de llamadas de procesamiento y la aparición de componentes en varias etapas de su ciclo de vida. Básicamente, proporciona una matriz de valores o variables dentro de la función que proporciona al gancho. Aquí encontrarás la mejor plataforma desde donde de React. Espero que lo encuentre informativo. contratar desarrolladores nativos

Keep

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - Website Development

Read My Blogs

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

 Add passwordless user experiences to your app

HackerNoon Mobile

React-Hooks: ¿Cuál es la diferencia entre useCallback y useMemo?

Demasiado Largo; Para Leer

Company Mentioned

@sahil-sachdeva

HISTORIAS RELACIONADAS