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:


fetch('/api/data')
.then(res => res.json())
.then(data => setData(data))

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:


useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) setVisible(true);
});
observer.observe(ref.current);
return () => observer.disconnect();
}, []);

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

Almacenamiento: localStorage / sessionStorage


localStorage.setItem('user', JSON.stringify(user));
const userData = JSON.parse(localStorage.getItem('user'));

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