8 ganchos de React más que debes conocer

Jan 20, 2024

Por Matthew Tyson

Arquitecto de software, InfoWorld |

React sigue siendo el pionero entre los marcos de interfaz de usuario de JavaScript. Hay muchos desarrollos en curso en React, pero el cambio más importante de los últimos años fue el paso a componentes funcionales. Los componentes funcionales dependen de ganchos para muchas de sus capacidades. El gancho más común es useState, pero hay muchos otros.

A continuación, presentamos ocho ganchos de React útiles que quizás no conozca y cómo usarlos.

Todo el mundo conoce useState porque reemplaza una característica esencial de los componentes basados ​​en clases (las variables miembro para mantener el estado) con un equivalente funcional. El gancho useReducer hace algo similar, pero para escenarios más complejos donde las transiciones de estado son más involucradas y la aplicación se beneficia al hacer las transiciones explícitas. El gancho useReducer está inspirado en los reductores que se encuentran en Redux. Puede verse como un término medio entre la simplicidad de usoState y la complejidad de un sistema de gestión estatal como Redux.

A continuación se muestra un ejemplo de cómo trabajar con el gancho useReducer. También puedes ver el reductor en vivo en este JSFiddle.

El propósito de este ejemplo es tomar el texto del cuadro de entrada y permitir que el usuario haga clic en los botones para mostrar el texto en mayúsculas o minúsculas. El código declara un nuevo reductor con const [estado, envío] = useReducer(reducer, inicialState);. useReducer toma la función reductora y el estado inicial y devuelve una matriz, que luego desestructuramos para declarar y enviar variables.

El reductor en sí se define con: const reductor = (estado, acción) =>, dando una función de dos argumentos. Siempre que se llame a la función de envío en el código, pasará el estado actual junto con un objeto de acción. En este caso, el objeto de acción tiene un campo de tipo y lo usamos para determinar cómo mutar el estado.

En una aplicación moderadamente compleja, useReducer puede resultar útil para gestionar la complejidad e incluso puede compartirse entre toda la aplicación mediante el contexto. Cuando useState es difícil de administrar debido a la complejidad de la aplicación, el gancho useReducer puede ayudar.

El gancho useCallback es un gancho de rendimiento. Toma una función y garantiza que solo se devolverá y reutilizará una única versión para todas las personas que llaman. Si la función es costosa y la llama repetidamente un bucle o componentes secundarios, el gancho useCallback puede generar ganancias de rendimiento significativas. Este tipo de optimización se conoce como memorizar una función.

En el Listado 2, tenemos un ejemplo del uso de useCallback para usar la misma función en muchos elementos de una lista. Aquí está el ejemplo en un JSFiddle en vivo.

Usamos React.useCallback() para crear una nueva función memorizada en incrementCounter. Podemos usar la función memorizada como una función normal en el controlador onClick, en la lista. useCallback() toma una función como primer argumento. Dentro de esa función podremos realizar cualquier trabajo que necesitemos. La diferencia clave es que React simplemente devuelve el valor almacenado en caché de la función a menos que algo haya cambiado en la lista de variables de dependencia, que en nuestro ejemplo es la variable de contador.

Este es un poder mágico precioso en los casos en los que es necesario compartir una función costosa entre varias personas que llaman, especialmente componentes secundarios. Tenga en cuenta que mientras miramos el siguiente gancho (useMemo) useCallback oculta la función en sí. Es decir, useCallback evita que la función real se vuelva a crear cada vez que aparece y solo la recrea cuando es necesario.

El gancho useMemo es el hermano de useCallback. Donde useCallback almacena en caché la función, useMemo almacena en caché el valor de retorno de la función. Es una distinción sutil, pero importante.

¿Cuándo debería utilizar useMemo frente a useCallback? La respuesta es: use useMemo cuando pueda y useCallback cuando sea necesario. El gancho useCallback es válido cuando el impacto en el rendimiento que está evitando es la creación de la función en sí en la representación, mientras que useMemo no impedirá que la función se vuelva a crear dondequiera que aparezca. Sin embargo, useMemo garantizará que la función devuelva un valor almacenado en caché si las dependencias no han cambiado.

El Listado 3 muestra useMemo en un ejemplo. También puedes ver este ejemplo en un JSFiddle en vivo.

En este ejemplo, tenemos una función cuyo cálculo cuesta mucho: calcularExpensiveValue. Depende de una sola entrada, cuenta. Podemos usar ComputeExpensiveValue(count), [count]) para indicar reaccionar: solo ejecute esta función si el recuento ha cambiado; de lo contrario, devuelve el cálculo almacenado en caché.

Nuevamente, la diferencia con useCallback no es obvia. La distinción importante es: useCallback es el gancho que se debe usar cuando se crean instancias repetidas de la función en sí, lo que genera un impacto en el rendimiento. De lo contrario, useMemo es la mejor opción.

En React, el contexto es un alcance variable que existe fuera de los componentes y al que todos los componentes tienen acceso. Como tal, es un espacio global rápido y sencillo para datos de toda la aplicación. Para escenarios complejos, podría ser mejor utilizar un almacén de datos oficial como Redux, pero para muchos usos, el contexto será suficiente. El gancho useContext es cómo los componentes funcionales interactúan con el contexto.

En el Listado 4, tenemos dos componentes, Speak y Happy, que son utilizados por el componente principal de la aplicación, App. El usuario puede alternar entre un estado de perro y de gato y, a través del contexto global, los componentes secundarios reflejarán la elección (meneando la cola versus ronroneando, por ejemplo). También puede consultar el JSFiddle en vivo para ver este ejemplo.

El gancho useRef le permite administrar una referencia fuera del ciclo de renderizado. useState hace que el motor React se procese cuando cambia, mientras que useRef no. El gancho useRef es como un área especial al lado de React que dice: Esta variable es especial y no es parte de la interfaz de usuario reactiva. El caso de uso más común de useRef es obtener acceso directamente al DOM y su API. Normalmente, en el pensamiento reactivo, esto se evita y todo debería hacerse a través del motor reactivo, pero a veces es inevitable.

En el Listado 5, cuando se hace clic en el botón, usamos el gancho useRef para mantener una referencia al campo de entrada y usamos los métodos DOM para enfocarlo y establecer su valor en "Algo sorprendente". Aquí está el JSFiddle para useRef ejemplo.

useEffect es el segundo gancho más común después de useState. Se utiliza con frecuencia para realizar llamadas API, cambiar el DOM o realizar otra acción (es decir, provocar un efecto) cuando algo cambia en el estado del componente. En cierto sentido, useEffect le permite definir una variable o variables reactivas y el comportamiento que ocurrirá con ellas.

En el Listado 6, definimos una lista desplegable para seleccionar un personaje de Star Wars. Cuando este valor cambia, realizamos una llamada API a la API de Star Wars (SWAPI) y mostramos los datos del personaje. Aquí está el JSFiddle en vivo para este ejemplo.

useLayoutEffect es un gancho menos conocido que entra en juego cuando necesitas realizar mediciones del DOM renderizado. El gancho useLayoutEffect se llama después de que React dibuja la interfaz de usuario, por lo que puede contar con que le dará acceso al diseño real.

En el Listado 7, usamos useRef para tomar un elemento del DOM y useLayoutEffect para recibir una notificación cuando se complete la representación. Luego, calculamos el tamaño del elemento usando la API DOM. Consulte también JSFiddle para ver este ejemplo.

A veces, es necesario obtener la referencia directamente a un componente. Puede hacer esto con useRef y, si también desea proporcionar acceso al DOM del componente, puede usar forwardRef. A veces, sin embargo, es necesario personalizar el comportamiento que expone el componente a través de la referencia. Para eso, necesita el gancho useImperativeHandle.