JLVBCOOP

Cuándo usar APIs del navegador en React: guía práctica para frontend

Josecho — Sat, 10 Jan 2026 11:37:26 +0000

Cuándo usar APIs del navegador en React: guía práctica para frontend

React es una librería poderosa para construir interfaces, pero no sustituye al navegador ni sus APIs nativas. Entender esta separación es clave para crear aplicaciones eficientes y correctas.

React no reemplaza al navegador

React gestiona:

Estado
Renderizado de componentes
Ciclo de vida

Pero no implementa:

Networking
Almacenamiento local o de sesión
Observación de elementos
Animaciones sincronizadas con el navegador

El navegador sigue siendo responsable del «CÓMO» ejecutar estas tareas.

Qué son las APIs del navegador

Las APIs nativas permiten interactuar con el entorno web:

fetch → solicitudes HTTP
IntersectionObserver → observar elementos en viewport
localStorage / sessionStorage → persistencia
Clipboard API → copiar y pegar
History API → navegación
requestAnimationFrame → animaciones

Estas APIs existen independientemente de React, que solo organiza cuándo y cómo llamarlas.

Casos prácticos: Networking, Observación y Almacenamiento

Networking: fetch

React no tiene API de red propia:

React maneja los datos, el navegador realiza la petición.

📌 Consejo: combina con AbortController para evitar memory leaks al desmontar componentes.

Observación — IntersectionObserver

Permite detectar cuándo un elemento entra o sale del viewport:

React coordina el ciclo de vida, la observación es nativa.

Almacenamiento: localStorage / sessionStorage

React decide cuándo leer/escribir, el navegador almacena.

Portapapeles y animaciones

Portapapeles

React solo dispara el evento, la API lo ejecuta.

Animaciones

Evita animaciones pesadas solo con estado de React para no forzar renders innecesarios.

Errores comunes

❌ Pensar que React “sustituye” al navegador

❌ Reimplementar APIs nativas con estado

❌ Encapsular todo en hooks innecesarios

❌ Ignorar el ciclo de vida del navegador

La regla mental clave

React decide el QUÉ, el navegador ejecuta el CÓMO.

React controla qué mostrar y cuándo, el navegador realiza la acción real.

Conclusión

Integrar React con las APIs del navegador de manera consciente mejora:

Rendimiento
Escalabilidad
Experiencia de usuario

Entender esta separación es un salto de madurez técnica como desarrollador frontend.

Enlaces internos sugeridos:

React vs APIs del Navegador

La entrada Cuándo usar APIs del navegador en React: guía práctica para frontend se publicó primero en JLVBCOOP.

React, useEffect y stale closures: cómo evitarlos con dependencias y useRef

Josecho — Sun, 04 Jan 2026 12:30:08 +0000

Introducción

En esta publicación vamos a explicar un problema muy común en React: los stale closures dentro de useEffect.
Aprenderás a:

Identificar cuando tu efecto está viendo datos antiguos
Corregirlo usando dependencias en el array
Usar useRef para mantener valores actualizados sin recrear el efecto

Al final, tendrás tres ejemplos prácticos que puedes copiar y probar.

Qué es un stale closure

Un stale closure ocurre cuando:

Un efecto (useEffect) captura un valor del render inicial
Ese valor cambia después, pero el efecto sigue usando el valor antiguo

💡 En palabras simples:

useEffect ve el mundo como era cuando nació.

Ejemplo 1: Bug clásico (sin dependencias)

Qué pasa:

El contador en pantalla sube
La consola siempre imprime 0
ESLint avisa: «React Hook useEffect has a missing dependency: ‘count'»

Ejemplo 2: Solución usando dependencias

Qué pasa:

Cada vez que count cambia, el efecto se limpia y se crea uno nuevo
La consola imprime siempre el valor correcto
⚠️ Cuidado: si el efecto es pesado, recrearlo cada vez puede ser costoso

Ejemplo 3: Solución avanzada usando useRef

Qué pasa:

El efecto se ejecuta una sola vez
La consola imprime siempre el valor actualizado
Más eficiente que recrear el efecto en cada cambio

Conclusión y regla de oro

useEffect ve el mundo como era cuando nació.
Las dependencias permiten “renacer” el efecto cuando cambian variables importantes.
useRef permite leer valores actuales sin recrear efectos.
Siempre limpia recursos como intervalos, listeners o fetches pendientes.

Frase clave:
“Dependencias → renacer del efecto. useRef → leer el presente sin renacer.”

Bonus para producción

Para intervalos, animaciones, polling y WebSockets, useRef es muy recomendable
Para fetches dependientes de filtros o props, usa dependencias correctas
Nunca ignores los warnings de ESLint sin entender la razón

La entrada React, useEffect y stale closures: cómo evitarlos con dependencias y useRef se publicó primero en JLVBCOOP.

React vs APIs del Navegador

Josecho — Thu, 01 Jan 2026 11:45:50 +0000

React vs APIs del Navegador (Modelo Mental)

React vs APIs del Navegador

React: Manejo de estado y renderizado de la UI
APIs del navegador: Capacidades de la plataforma

React no reemplaza:

Peticiones de red
Observadores
Almacenamiento
Portapapeles
Navegación
Animaciones

Las aplicaciones React coordinan estas APIs mediante efectos y hooks personalizados.

¿Por qué React no reemplaza las APIs del navegador?

Aunque React es un framework poderoso para construir interfaces de usuario, no reemplaza las funcionalidades nativas del navegador. React se enfoca principalmente en abstraer y optimizar el DOM, gestionar el estado de los componentes y facilitar la renderización de la interfaz de manera eficiente.

Sin embargo, muchas tareas esenciales para una aplicación web aún dependen directamente de APIs del navegador. Por ejemplo:

Networking: React no tiene una forma incorporada de hacer peticiones HTTP; usamos APIs como fetch() o librerías externas (Axios) para obtener datos de un servidor.
Almacenamiento: React no reemplaza localStorage, sessionStorage o IndexedDB cuando necesitamos guardar información en el navegador.
Interacciones avanzadas: Para detectar la visibilidad de un elemento (IntersectionObserver), cambios en el DOM (MutationObserver) o animaciones precisas (requestAnimationFrame), debemos usar las APIs nativas.

En pocas palabras: React y las APIs del navegador se complementan, no se sustituyen. React nos ayuda a manejar la UI de manera declarativa, mientras que las APIs nativas nos proporcionan acceso directo a funcionalidades que el navegador ya implementa.

Esta comprensión es clave para evitar confusiones comunes entre principiantes, quienes a veces esperan que React lo haga “todo” por ellos.

1. Fetch API

Propósito: Peticiones HTTP

Se usa directamente o a través de librerías. Entender Fetch es clave para:

Depuración
Manejo de errores
Rendimiento

Dominar Fetch permite construir aplicaciones React más predecibles y eficientes. Fetch generalmente se combina con AbortController para evitar pérdidas de memoria.

2. AbortController

Propósito: Cancelar peticiones

Muy común en proyectos profesionales para:

Evitar fugas de memoria
Cancelar búsquedas
Mejorar la experiencia de usuario

Su uso correcto diferencia código de prueba de código listo para producción.

3. IntersectionObserver

Propósito: Detectar visibilidad en el viewport

Usado para:

Scroll infinito
Lazy loading
Métricas y analítica

React no ofrece una alternativa nativa para esto. Aprender esta API es esencial para optimizar rendimiento y experiencia de usuario.

4. ResizeObserver

Propósito: Detectar cambios de tamaño

Ideal para interfaces complejas como:

Dashboards
Gráficos
Editores

Esta API permite crear componentes verdaderamente responsivos sin hacks.

5. History API

Propósito: Control de navegación

Aunque los routers la usan internamente, los desarrolladores la utilizan para:

Filtros en la URL
Paginación
Estados compartibles

Comprender esta API ayuda a depurar y diseñar mejores flujos de navegación.

6. URL y URLSearchParams

Propósito: Manipulación segura de URLs

Muy común en:

Filtros
Búsquedas
Links compartidos

7. Clipboard API

Propósito: Copiar y pegar texto

Usado para:

Botones de copiar
Compartir enlaces
Herramientas internas

Esta API simplifica una funcionalidad muy común en aplicaciones modernas.

8. Web Storage API

Propósito: Persistencia en el cliente

Usado para:

Tema
Idioma
Preferencias

No debe usarse para datos sensibles. Un uso responsable de esta API mejora la experiencia sin comprometer la seguridad.

9. Navigator API

Propósito: Información del entorno

Mejora la UX mediante:

Detección offline
Idioma
Capacidades del dispositivo

Estas mejoras hacen que la aplicación sea más robusta y adaptable.

10. requestAnimationFrame

Propósito: Animaciones eficientes

Ideal para:

Animaciones personalizadas
Canvas
Efectos avanzados

Dominar esta API es clave para animaciones fluidas y de alto rendimiento.

Uso Real en Proyectos

En proyectos reales:

Las APIs se encapsulan en hooks personalizados
Los componentes se mantienen simples
Los efectos manejan el ciclo de vida

Conclusión

Las APIs del navegador son esenciales en proyectos React reales. Dominarlas permite:

Escribir mejor código
Reducir dependencias
Depurar más rápido
Crear mejores experiencias

Aprender estas APIs es un paso clave hacia un nivel senior en React.

La entrada React vs APIs del Navegador se publicó primero en JLVBCOOP.

Manejo del Estado en React a través de la URL

Josecho — Sun, 22 Sep 2024 11:08:15 +0000

Eligiendo un Enfoque de Estado en React

Manejo del Estado en React a través de la URL

Mantener el estado en la URL en una aplicación React tiene varios beneficios:

Persistencia del Estado: El estado se mantiene incluso si el usuario recarga la página o comparte la URL con otros. Esto es especialmente útil para aplicaciones que requieren que el estado se mantenga entre sesiones.
Facilidad de Navegación: Los usuarios pueden usar los botones de retroceso y avance del navegador para navegar entre diferentes estados de la aplicación, lo que mejora la experiencia de usuario.
Compartibilidad: Los usuarios pueden compartir la URL con otros, permitiendo que otros vean exactamente el mismo estado de la aplicación. Esto es útil para aplicaciones como tableros de control, filtros de búsqueda, o cualquier aplicación donde el estado es importante.
SEO y Accesibilidad: Para aplicaciones que necesitan ser indexadas por motores de búsqueda, tener el estado en la URL puede ayudar a los motores de búsqueda a entender mejor el contenido de la página.
Sincronización: Facilita la sincronización del estado entre diferentes componentes de la aplicación, ya que el estado en la URL puede ser leído y actualizado fácilmente por cualquier componente.
Historial del Navegador: Permite que el estado de la aplicación se registre en el historial del navegador, lo que puede ser útil para análisis y depuración.

DESCARGA CÓDIGO

En aplicaciones web modernas, es común querer reflejar el estado de la aplicación en la URL para permitir a los usuarios compartir enlaces específicos o para mantener la navegación coherente. En React, esto se puede lograr utilizando bibliotecas como react-router-dom y el API de la Historia del Navegador.

Aquí tienes una guía básica para mantener el estado en la URL en una aplicación React:

1. Instalación de react-router-dom

Primero, necesitas instalar react-router-dom si aún no lo has hecho:

npm install react-router-dom

2. Configuración del Router

Configura el router en tu aplicación utilizando BrowserRouter, Route y Switch. Aquí hay un ejemplo básico:

3. Uso de Parámetros de URL

Puedes usar parámetros de URL para manejar el estado. Utiliza el hook useParams para leer los parámetros de la URL. Por ejemplo, si quieres mostrar detalles de un producto basado en su ID:

4. Actualización del Estado Basado en la URL

Para actualizar el estado basado en la URL, puedes usar el hook useHistory:

5. Sincronización del Estado con la URL

Para sincronizar el estado de la aplicación con la URL, puedes usar el hook useLocation.

useLocation es un hook que devuelve un objeto de ubicación que representa la URL actual. Este objeto contiene información útil como la ruta, los parámetros de consulta, el estado y más. Puedes utilizar useLocation en cualquier componente funcional que esté dentro de un Router.

Aquí tienes un ejemplo básico:

Propiedades del Objeto de Ubicación

El objeto de ubicación tiene varias propiedades importantes:

pathname: La ruta actual de la URL (por ejemplo, /about).
search: La cadena de consulta de la URL (por ejemplo, ?query=react).
hash: El fragmento hash de la URL (por ejemplo, #section1).
state: Un objeto que contiene cualquier estado adicional que se haya pasado a la ubicación.

Ejemplo Práctico

Supongamos que tienes una aplicación con una barra de búsqueda y quieres actualizar los resultados de búsqueda basándote en los parámetros de la URL. Aquí tienes un ejemplo de cómo podrías hacerlo:

En este ejemplo, useQuery es una función personalizada que utiliza useLocation para obtener los parámetros de consulta de la URL. Luego, SearchResults utiliza estos parámetros para realizar una búsqueda y mostrar los resultados.

Conclusión

Manejar el estado de React a través de la URL es una técnica poderosa para mejorar la experiencia del usuario y la navegabilidad de tu aplicación. Utilizando react-router-dom y los hooks de React, puedes sincronizar fácilmente el estado de tu aplicación con la URL, permitiendo una navegación más intuitiva y compartible.

La entrada Manejo del Estado en React a través de la URL se publicó primero en JLVBCOOP.

Entendiendo el Hook useDebugValue en React

Josecho — Sat, 14 Sep 2024 07:30:18 +0000

Entendiendo el Hook useDebugValue en React

Vamos a hablar sobre un hook de React que puede ser muy útil para el desarrollo y depuración de componentes: useDebugValue. Este hook es especialmente útil cuando estás creando tus propios hooks personalizados y quieres proporcionar información adicional para las herramientas de desarrollo de React.

¿Qué es useDebugValue?

useDebugValue es un hook que te permite etiquetar el valor de un hook personalizado para que aparezca en las herramientas de desarrollo de React. Esto puede hacer que la depuración sea más fácil y clara, especialmente cuando trabajas con hooks complejos.

¿Cómo se usa useDebugValue?

El uso de useDebugValue es bastante sencillo. Aquí tienes un ejemplo básico:

En este ejemplo, useDebugValue toma un argumento que es el valor que quieres mostrar en las herramientas de desarrollo. En este caso, estamos mostrando un mensaje basado en si el valor está definido o no.

Ejemplo más avanzado

Vamos a ver un ejemplo un poco más avanzado donde useDebugValue se usa con una función formateadora:

En este caso, useDebugValue toma dos argumentos: el valor y una función que formatea ese valor. Esto puede ser útil para mostrar información más legible en las herramientas de desarrollo.

¿Cuándo deberías usar useDebugValue?

useDebugValue es especialmente útil cuando:

1. Estás desarrollando hooks personalizados que otros desarrolladores usarán.
2. Quieres proporcionar información adicional para la depuración.
3. Estás trabajando en un proyecto grande y necesitas una forma clara de seguir el estado de tus hooks.

Conclusión

useDebugValue es una herramienta poderosa para mejorar la depuración de tus componentes de React. Aunque no es necesario para todos los hooks, puede ser muy útil en situaciones donde la claridad y la información adicional son clave.

La entrada Entendiendo el Hook useDebugValue en React se publicó primero en JLVBCOOP.

Entendiendo el Hook useDeferredValue en React

Josecho — Fri, 06 Sep 2024 16:00:53 +0000

Entendiendo el Hook useDeferredValue en React

Hoy vamos a hablar sobre un hook relativamente nuevo en React: useDeferredValue. Este hook es especialmente útil cuando queremos mejorar el rendimiento de nuestras aplicaciones, especialmente en situaciones donde tenemos que manejar grandes cantidades de datos o interfaces de usuario complejas.

¿Qué es useDeferredValue?

useDeferredValue es un hook que nos permite diferir la actualización de un valor hasta que el navegador tenga tiempo libre. Esto es útil para evitar bloqueos en la interfaz de usuario cuando se realizan operaciones costosas.

¿Cómo funciona?

El hook useDeferredValue toma un valor y devuelve una versión diferida de ese valor. La versión diferida se actualiza en segundo plano, permitiendo que la interfaz de usuario siga siendo interactiva mientras se realiza la actualización.

Ejemplo de uso

Vamos a ver un ejemplo práctico para entender mejor cómo funciona useDeferredValue.

Explicación del código

Estado y Diferido: Utilizamos useState para manejar el estado del input y useDeferredValue para crear una versión diferida de ese input.
Manejo de Cambios: La función handleChange actualiza el estado del input cada vez que el usuario escribe algo.
Componente Costoso: ExpensiveComponent simula una operación costosa al renderizar 10,000 elementos. Usamos el valor diferido (deferredInput) para evitar que la interfaz de usuario se bloquee mientras se actualiza el input.

¿Cuándo usar useDeferredValue?

Operaciones Costosas: Cuando tienes componentes que realizan operaciones costosas y quieres mantener la interfaz de usuario responsiva.
Grandes Cantidades de Datos: Al manejar grandes cantidades de datos que pueden causar bloqueos en la interfaz de usuario.

Conclusión

useDeferredValue es una herramienta poderosa para mejorar el rendimiento de nuestras aplicaciones React. Al diferir la actualización de valores, podemos mantener la interfaz de usuario fluida y responsiva, incluso en situaciones complejas.

La entrada Entendiendo el Hook useDeferredValue en React se publicó primero en JLVBCOOP.

Entendiendo el Hook useTransition en React

Josecho — Sat, 31 Aug 2024 10:25:37 +0000

Entendiendo el Hook useTransition en React

Hoy vamos a hablar sobre un hook de React que puede mejorar significativamente la experiencia del usuario en nuestras aplicaciones: useTransition. Este hook es parte de la familia de hooks de React introducidos en la versión 18 y está diseñado para manejar transiciones de estado de manera más eficiente.

¿Qué es useTransition?

El hook useTransition nos permite marcar ciertas actualizaciones de estado como transiciones. Esto es útil cuando queremos diferenciar entre actualizaciones urgentes (como la entrada de texto en un campo de formulario) y actualizaciones no urgentes (como la carga de una lista de resultados de búsqueda).

¿Cómo funciona?

El hook useTransition devuelve un array con dos elementos:

startTransition: Una función que usamos para envolver las actualizaciones de estado que queremos marcar como transiciones.
isPending: Un booleano que indica si hay una transición en curso.

Ejemplo de uso

Vamos a ver un ejemplo práctico para entender mejor cómo funciona useTransition.

Explicación del código

Estado y hooks: Definimos tres estados: query para almacenar la consulta de búsqueda, results para almacenar los resultados de la búsqueda, y isPending para saber si hay una transición en curso. También obtenemos la función startTransition del hook useTransition.
Manejo de cambios: En el manejador de cambios del input, actualizamos el estado query inmediatamente y luego usamos startTransition para envolver la actualización de los resultados de búsqueda. Esto marca la actualización de los resultados como una transición no urgente.
Renderizado condicional: Mientras isPending es true, mostramos un mensaje de “Loading…”. Una vez que la transición termina, mostramos la lista de resultados.

Beneficios de usar useTransition

Mejora de la experiencia del usuario: Al diferenciar entre actualizaciones urgentes y no urgentes, podemos mantener la interfaz de usuario responsiva incluso cuando se están realizando operaciones costosas.
Optimización del rendimiento: React puede priorizar las actualizaciones urgentes y retrasar las no urgentes, lo que resulta en una mejor gestión de los recursos.

La entrada Entendiendo el Hook useTransition en React se publicó primero en JLVBCOOP.

Entendiendo el Hook useEffect en React

Josecho — Sat, 24 Aug 2024 09:22:14 +0000

Entendiendo el Hook useEffect en React

El hook useEffect es uno de los hooks más utilizados en React. Nos permite realizar efectos secundarios en componentes funcionales, como la manipulación del DOM, la suscripción a eventos, o la realización de peticiones a APIs. En este post, exploraremos cómo funciona y cómo podemos utilizarlo de manera efectiva.

¿Qué es useEffect?

useEffect es un hook que se ejecuta después de que el componente se haya renderizado. Se puede pensar en él como una combinación de los métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount en los componentes de clase.

Sintaxis Básica

La sintaxis básica de useEffect es la siguiente:

El primer argumento de useEffect es una función que contiene el código que queremos ejecutar. El segundo argumento es un array de dependencias. Si este array está vacío, el efecto solo se ejecutará una vez, después del primer renderizado.

Ejemplo Práctico

Supongamos que queremos realizar una petición a una API cuando el componente se monte. Podemos hacerlo de la siguiente manera:

En este ejemplo, useEffect se utiliza para realizar una petición a una API cuando el componente se monta. El array de dependencias está vacío, por lo que el efecto solo se ejecuta una vez.

Limpiando Efectos

A veces, es necesario limpiar los efectos para evitar fugas de memoria o comportamientos inesperados. Podemos hacerlo retornando una función desde el primer argumento de useEffect:

En este ejemplo, añadimos un event listener para el evento de redimensionamiento de la ventana cuando el componente se monta, y lo eliminamos cuando el componente se desmonta.

Conclusión

El hook useEffect es una herramienta poderosa que nos permite manejar efectos secundarios en componentes funcionales de React. Al entender cómo y cuándo usarlo, podemos crear aplicaciones más eficientes y fáciles de mantener.

La entrada Entendiendo el Hook useEffect en React se publicó primero en JLVBCOOP.

Entendiendo el Hook useReducer en React

Josecho — Thu, 15 Aug 2024 07:07:55 +0000

Eligiendo un Enfoque de Estado en React

Entendiendo el Hook useReducer en React

En el desarrollo de aplicaciones con React, a menudo necesitamos manejar estados complejos que involucran múltiples valores y acciones. Aunque el hook useState es útil para estados simples, useReducer ofrece una solución más robusta para manejar estados complejos. En este post, exploraremos cómo funciona useReducer y cómo puedes utilizarlo en tus proyectos de React.

¿Qué es useReducer?

useReducer es un hook que se utiliza para manejar el estado en componentes funcionales de React. Es una alternativa a useState y es especialmente útil cuando el estado de tu componente depende de acciones complejas o múltiples. La sintaxis básica de useReducer es la siguiente:

const [state, dispatch] = useReducer(reducer, initialState);

reducer: Es una función que determina cómo cambiará el estado en respuesta a una acción. Recibe el estado actual y una acción, y devuelve el nuevo estado.
initialState: Es el estado inicial del componente.

¿Cómo funciona useReducer?

Para entender mejor cómo funciona useReducer, veamos un ejemplo práctico. Supongamos que estamos construyendo un contador que puede incrementarse, decrementarse y reiniciarse.

Paso 1: Definir el estado inicial y el reducer

Primero, definimos el estado inicial y la función reducer:

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
           throw new Error();
    }
}

Paso 2: Usar useReducer en el componente

A continuación, utilizamos useReducer en nuestro componente:

Paso 3: Entender el flujo de trabajo

Estado inicial: El estado inicial se define como { count: 0 }.
Reducer: La función reducer maneja las acciones increment, decrement y reset, actualizando el estado en consecuencia.
Dispatch: La función dispatch se utiliza para enviar acciones al reducer. Cada botón en el componente envía una acción diferente.

Ventajas de useReducer

Claridad: Separa la lógica de actualización del estado del componente, haciendo el código más claro y mantenible.
Escalabilidad: Maneja estados complejos y múltiples acciones de manera eficiente.
Previsibilidad: La función reducer es pura, lo que significa que siempre produce el mismo resultado dado el mismo estado y acción.

Conclusión

El hook useReducer es una herramienta poderosa para manejar estados complejos en componentes de React. Al entender cómo funciona y cuándo usarlo, puedes mejorar la claridad y mantenibilidad de tu código. ¡Espero que este post te haya sido útil y te animes a utilizar useReducer en tus próximos proyectos!

Pulsa aquí para añadir un texto

La entrada Entendiendo el Hook useReducer en React se publicó primero en JLVBCOOP.

Entendiendo el Hook useCallback en React

Josecho — Sun, 11 Aug 2024 07:33:09 +0000

Entendiendo el Hook useCallback en React

En el desarrollo de aplicaciones con React, la optimización del rendimiento es crucial para asegurar una experiencia de usuario fluida. Uno de los hooks que nos ayuda a lograr esto es useCallback. En este post, exploraremos qué es useCallback, cómo funciona y cuándo deberías usarlo.

¿Qué es useCallback?

useCallback es un hook que nos permite memorizar funciones en React. Esto significa que podemos evitar que una función se vuelva a crear en cada renderizado, lo cual puede ser útil para optimizar componentes que dependen de funciones como props.

¿Cómo funciona useCallback?

El hook useCallback toma dos argumentos:

La función que queremos memorizar.
Un array de dependencias.

La sintaxis básica es la siguiente:

const memoizedCallback = useCallback(() => {
// lógica de la función
}, [dependencias]);

React solo recreará la función si alguna de las dependencias ha cambiado desde el último renderizado.

Ejemplo Práctico

Imaginemos que tenemos un componente que renderiza una lista de elementos y cada elemento tiene un botón que, al hacer clic, llama a una función para actualizar el estado.

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

const ListaDeElementos = ({ elementos }) => {
  const [contador, setContador] = useState(0);

  const incrementarContador = useCallback(() => {
    setContador(contador + 1);
  }, [contador]);

  return (
    <div>
      <p>Contador: {contador}p>
      <ul>
        {elementos.map((elemento, index) => (
          <li key={index}>
            {elemento} <button onClick={incrementarContador}>Incrementarbutton>
          li>
        ))}
      ul>
    div>
  );
};

export default ListaDeElementos;

En este ejemplo, incrementarContador se memoriza usando useCallback. Esto significa que la función solo se recreará si contador cambia, evitando renderizados innecesarios de los elementos de la lista.

¿Cuándo usar useCallback?

Debes considerar usar useCallback en las siguientes situaciones:

Funciones pasadas como props: Si pasas funciones a componentes hijos y esos componentes dependen de la referencia de la función para evitar renderizados innecesarios.
Funciones en efectos: Si usas funciones dentro de hooks como useEffect y quieres asegurarte de que no se vuelvan a crear en cada renderizado.

Conclusión

El hook useCallback es una herramienta poderosa para optimizar el rendimiento de tus aplicaciones React. Al memorizar funciones, puedes evitar renderizados innecesarios y mejorar la eficiencia de tus componentes. Recuerda usarlo de manera estratégica y solo cuando sea necesario.

Pulsa aquí para añadir un texto

La entrada Entendiendo el Hook useCallback en React se publicó primero en JLVBCOOP.

JLVBCOOP

Cuándo usar APIs del navegador en React: guía práctica para frontend

Cuándo usar APIs del navegador en React: guía práctica para frontend

React no reemplaza al navegador

Qué son las APIs del navegador

Casos prácticos: Networking, Observación y Almacenamiento

Networking: fetch

Observación — IntersectionObserver

Almacenamiento: localStorage / sessionStorage

Portapapeles y animaciones

Portapapeles

Animaciones

Errores comunes

La regla mental clave

Conclusión

React, useEffect y stale closures: cómo evitarlos con dependencias y useRef

Introducción

Qué es un stale closure

Ejemplo 1: Bug clásico (sin dependencias)

Ejemplo 2: Solución usando dependencias

Ejemplo 3: Solución avanzada usando useRef

Conclusión y regla de oro

Bonus para producción

React vs APIs del Navegador

React vs APIs del Navegador (Modelo Mental)

¿Por qué React no reemplaza las APIs del navegador?

Uso Real en Proyectos

Conclusión

Manejo del Estado en React a través de la URL

Eligiendo un Enfoque de Estado en React

Manejo del Estado en React a través de la URL

Compartir esta entrada

1. Instalación de react-router-dom

2. Configuración del Router

3. Uso de Parámetros de URL

4. Actualización del Estado Basado en la URL

5. Sincronización del Estado con la URL

Propiedades del Objeto de Ubicación

Ejemplo Práctico

Conclusión

Entendiendo el Hook useDebugValue en React

Entendiendo el Hook useDebugValue en React

Compartir esta entrada

¿Qué es useDebugValue?

¿Cómo se usa useDebugValue?

Ejemplo más avanzado

¿Cuándo deberías usar useDebugValue?

Conclusión

Entendiendo el Hook useDeferredValue en React

Entendiendo el Hook useDeferredValue en React

Compartir esta entrada

¿Qué es useDeferredValue?

¿Cómo funciona?

Ejemplo de uso

Explicación del código

¿Cuándo usar useDeferredValue?

Conclusión

Entendiendo el Hook useTransition en React

Entendiendo el Hook useTransition en React

Compartir esta entrada

¿Qué es useTransition?

¿Cómo funciona?

Ejemplo de uso

Explicación del código

Beneficios de usar useTransition

Entendiendo el Hook useEffect en React

Entendiendo el Hook useEffect en React

Compartir esta entrada

¿Qué es useEffect?

Sintaxis Básica

Ejemplo Práctico

Limpiando Efectos

Conclusión

Entendiendo el Hook useReducer en React

Eligiendo un Enfoque de Estado en React

Entendiendo el Hook useReducer en React

Compartir esta entrada

¿Qué es useReducer?

¿Cómo funciona useReducer?

Paso 1: Definir el estado inicial y el reducer