Introducción a React useCallBack()

Al crear un sitio web con React, es importante tener en cuenta la rapidez con la que se carga y la rapidez con la que los usuarios pueden interactuar con él. Una forma de hacer que un sitio web de React sea más rápido es evitar que realice un trabajo innecesario, como volver a renderizar partes de la página que no han cambiado.

La funciónuseCallback() en React nos ayuda a lograr esto recordando las funciones que definimos y solo volviéndolas a crear cuando sea necesario.Esto puede hacer que el sitio web sea más rápido y receptivo para los usuarios. React es la biblioteca de JavaScript front-end más popular, según una encuesta de Stack Overflow del mismo año, lo que sugiere que useCallback() probablemente se use ampliamente en la industria.

En este artículo, explicaremos qué es useCallBack() en React y cómo usarlo en nuestro código React para mejorar el rendimiento.

¿Qué es useCallBack en React?

useCallback() es una función de enlace proporcionada por React que se usa para memorizar una función. En otras palabras, ayuda a optimizar el rendimiento de un componente al evitar el renderizado no deseado.

En React, cuando cambia el estado o la propiedad de un componente, el componente se vuelve a renderizar para reflejar los valores actualizados. Este proceso es computacionalmente costoso y puede disminuir el rendimiento de la aplicación si se maneja incorrectamente. Aquí es donde useCallback() resulta útil.

Con useCallback(), los usuarios pueden memorizar una función, lo que significa que solo se redefine cuando cambian sus dependencias. Esto evita que los componentes se vuelvan a renderizar innecesariamente, optimizando así el rendimiento de la aplicación.

Aquí hay un ejemplo -

const memoizedCallback = useCallback(

() => {

hacerAlgo(a, b);

},

[a, b],

);

Si bien comenzar con React a través de tutoriales es una excelente manera, seguir un curso dinámico para comenzar con el desarrollo puede ayudarlo significativamente a actualizar sus habilidades. ¡Vea el Programa Ejecutivo de Posgrado en Desarrollo de Software - Curso de Especialización en Desarrollo Full Stack de upGrad a kickstart!

Ventajas de usar useCallBack()

Aquí hay algunas ventajas de usar React useCallBack() –

• useCallback() puede ayudar a que las aplicaciones React se ejecuten más rápido al evitar actualizaciones innecesarias de componentes.
• Si un componente obtiene muchos datos y los muestra como un gráfico, puede beneficiarse de useCallback().
• Si el componente principal del gráfico se actualiza, pero los cambios no afectan al gráfico, no es necesario actualizarlo y recuperar los datos nuevamente.
• Usando useCallback() para memorizar la función que obtiene los datos, podemos evitar actualizaciones innecesarias y hacer que la aplicación sea más rápida y fluida.
• Esta optimización puede mejorar la experiencia del usuario, ya que la aplicación funcionará de manera más rápida y eficiente.

Consultelos cursos de desarrollo de software de upGrad para mejorar sus habilidades.

Sintaxis y parámetros de useCallBack()

const memoizedCallback = useCallback(

() => {

hacer algo();

},

[dependencia1, dependencia2]

);

En el ejemplo, el enlace useCallback() memoriza la función doSomething(), lo que significa que almacena en caché la versión creada anteriormente. La función almacenada en caché solo se usará en renderizaciones posteriores a menos que cambie el valor dedependency1 o dependency2.

Si alguna de estas dependencias cambia, se creará una nueva versión de la funcióndoSomething() y la versión almacenada en caché se reemplazará por la nueva.Esto ayuda a optimizar el rendimiento de la aplicación al evitar la creación y repetición de funciones innecesarias.

Diferencia entre useMemo() y useCallBack()

useCallback y useMemo son React Hooks que pueden mejorar el rendimiento de una aplicación React al memorizar valores. Ambos ganchos toman una función como argumento y devuelven una versión memorizada de esa función.

Aquí está la diferencia entre los dos:

Escenarios cuando usar useCallBack()

Estos son los escenarios en los que se puede usar useCallBack():

Optimización de componentes secundarios

useCallback React optimiza los componentes secundarios que se basan en la igualdad de referencia para evitar representaciones innecesarias, especialmente al pasar devoluciones de llamada a estos componentes secundarios.

Prevención de renderizaciones innecesarias

React useCallback es particularmente útil cuando tiene un componente con un elemento secundario que se procesa repetidamente sin necesitarlo. Puede pasar una función de devolución de llamada y una matriz de dependencias a useCallback para evitar representaciones innecesarias.

Aproveche la oportunidad de comprender la función useCallBack() en detalle con la ayuda del curso Bootcamp de desarrollo de software Full Stack de upGrad.

Explore nuestros cursos populares de ingeniería de software

Ejemplos de useCallBack()

Estos son algunos ejemplos de cómo implementar el gancho useCallBack().

useCallBack Ejemplo 1

Cuando un componente principal pasa una función como accesorio a un componente secundario, la representación frecuente del componente principal puede hacer que el componente secundario se vuelva a procesar innecesariamente. En tales casos, use useCallback para memorizar la función que puede ayudar a prevenir estas re-renderizaciones innecesarias.

import React, { useCallback } from 'react';

function ComponentePadre() {

const handleButtonClick = useCallback(() => {

console.log('Botón presionado');

}, []);

devolver (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

devolver (

<button onClick={onClick}>Haz clic en mí</button>

);

}

useCallBack Ejemplo 2

Suponga que tiene una función que realiza cálculos complejos en un gran conjunto de datos. Si esta función se llama con frecuencia y tarda mucho tiempo en ejecutarse, puede causar problemas de rendimiento en su aplicación. En este escenario, puede usar useCallback para memorizar la función y evitar una nueva ejecución innecesaria del cálculo.

import React, { useState, useCallback } from 'react';

function ComponentePadre() {

const [datos, setData] = useState([]);

const procesarDatos = useCallback(() => {

const datosProcesados ​​= “Datos Procesados”;

devolver datos procesados;

}, [datos]);

devolver (

<ChildComponent processData={processData} />

);

}

función ChildComponent({procesar datos}) {

const resultado = procesarDatos();

devolver (

<div>{resultado}</div>

);

}

Optimización del rendimiento de React usando useCallBack()

Un enlace useCallback es una herramienta poderosa en React que le permite memorizar una función, asegurándose de que solo se rehaga cuando se cambia una de sus dependencias. Esto es particularmente beneficioso para las funciones de alto rendimiento que se llaman con frecuencia. Consulte el siguiente ejemplo para ver cómo se puede utilizar:

import { useState, useEffect } desde 'reaccionar';

aplicación de función () {

const [palabra, establecerPalabra] = usarEstado(“Bob”);

const say = () => console.log(`Su palabra es: ${palabra}`);

usarEfecto(() => {

decir();

}, [decir]);

volver <div>¡Bienvenido!</div>;

}

El ejemplo demuestra que el gancho useEffect depende de la función say, lo que significa que solo debería activarse con un cambio en la función. Sin embargo, debido a las verificaciones de igualdad referencial de React, digamos que la función siempre se evaluará como verdadera, incluso en el caso de que no haya cambios reales, lo que resultará en renderizaciones innecesarias.

La devolución de llamada useEffect se utilizará en cada representación, lo que no es adecuado para el rendimiento. Una forma de resolver esto es reubicar la función en el bloque useEffect, pero esta no sería una solución ideal ya que no podría usar la función en ningún otro lugar. Mira este ejemplo a continuación:

import React, { useState, useEffect } from 'react';

aplicación de función () {

const [palabra, establecerPalabra] = usarEstado(“Bob”);

const say = () => console.log(`Su palabra es: ${palabra}`);

usarEfecto(() => {

decir();

}, [decir]);

volver <div>¡Bienvenido!</div>;

}

Otra solución es implementar el enlace useCallback envolviendo la función. Es esencial recordar que la función useCallback requiere una matriz de dependencias como useEffect. Si la función toma alguna variable, los usuarios pueden pasarla con la matriz; o bien dejarlo vacío. Aquí, como la función decir se basa en la palabra variable, la incluimos en la matriz.

importar {useState, useEffect,useCallback} desde 'reaccionar'

aplicación de función () {

const [palabra,establecerPalabra]=usarEstado(“Bob”)

const say = useCallback(()=>console.log(`Su palabra es: ${palabra}`),[palabra])

usarEfecto(()=>{

decir()

},[decir])

volver <div>¡Bienvenido!</div>

}

Cuándo no usar useCallBack()

Si bien useCallback() es una herramienta útil para optimizar el rendimiento en ciertos escenarios, también hay momentos en los que es innecesario o incluso perjudicial. Estos son algunos ejemplos de cuándo no usar useCallback():

• Cuando la función se pasa como prop ya es una función pura que no depende de un estado externo.
• Cuando la función se pasa como accesorio, no causa ningún problema de rendimiento y no se llama en exceso.
• Cuando la función se pasa como accesorio, se usa en varios lugares y debe volver a crearse cada vez para reflejar diferentes comportamientos o dependencias.
• Cuando la función se pasa como un apoyo es parte de un pequeño árbol de componentes, la ganancia de rendimiento de useCallback() sería insignificante.
• Cuando la función se pasa como accesorio, se usa como un controlador de eventos y solo se llama una vez.

En estos casos, el uso de useCallback() puede disminuir el rendimiento debido a la sobrecarga de crear y mantener la devolución de llamada memorizada. Es importante considerar cada caso de uso cuidadosamente y sopesar los beneficios potenciales frente a los costos potenciales antes de decidir si usar o no useCallback().

Habilidades de desarrollo de software bajo demanda

Conclusión

El uso de useCallback puede ser una herramienta poderosa para optimizar el rendimiento de su aplicación React. Al memorizar las funciones, se pueden evitar los renderizados innecesarios, lo que lleva a una experiencia de usuario más fluida y eficiente. Sin embargo, es importante usar useCallback con prudencia y comprender los escenarios cuando es más efectivo.

upGrad ofrece un programa de Maestría en Ciencias en Ciencias de la Computación que brinda una educación integral en ciencias de la computación que se enfoca en habilidades relevantes para la industria. Este programa es para cualquier persona nueva o con más experiencia para mejorar sus habilidades de desarrollo de software. Con este curso, los estudiantes estarán más que listos para mejorar sus carreras en el mundo real y convertirse en expertos en los campos a los que aspiran.