When to Use Browser APIs in React: Practical Frontend Guide

React is a powerful library for building user interfaces, but it does not replace the browser or its native APIs. Understanding this distinction is crucial for creating efficient and correct applications.

React Does Not Replace the Browser

React manages:

  • State
  • Component rendering
  • Lifecycle

But it does not implement:

  • Networking
  • Local or session storage
  • Element observation
  • Browser-synced animations

The browser is still responsible for executing the “HOW” of these tasks.

What Are Browser APIs?

Native browser APIs allow interaction with the web environment:

  • fetch → HTTP requests
  • IntersectionObserver → observe elements in the viewport
  • localStorage / sessionStorage → persistence
  • Clipboard API → copy and paste
  • History API → navigation
  • requestAnimationFrame → animations

These APIs exist independently of React, which only organizes when and how to call them.

Practical Cases: Networking, Observation, and Storage

Networking: fetch

React has no built-in networking API:


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

React handles the data, the browser performs the request.

📌 Tip: combine with AbortController to avoid memory leaks when a component unmounts.

Observation: IntersectionObserver

Detects when an element enters or leaves the viewport:


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

React coordinates lifecycle, observation is native.

Storage: localStorage / sessionStorage


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

React decides when to read/write, the browser stores the data.