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 requestsIntersectionObserver→ observe elements in the viewportlocalStorage/sessionStorage→ persistenceClipboard API→ copy and pasteHistory API→ navigationrequestAnimationFrame→ 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.
Great reminder that React is an orchestration layer, not an execution environment. I especially like the “React decides WHAT, the browser executes HOW” rule — that mental model clears up a lot of common anti-patterns (like recreating observers or animations with state alone).
One thing worth adding is that many performance problems in React apps come from over-Reactifying browser capabilities. Using native APIs directly — IntersectionObserver for lazy loading, requestAnimationFrame for animations, or AbortController for cleanup — often reduces renders and simplifies logic.
In practice, senior frontend work is less about adding more hooks and more about knowing when not to use React. This post explains that boundary really well.