How I Think About Frontend Performance

Introduction

Frontend performance issues are rarely isolated to the frontend. They are often the result of how the entire system is designed, including API responses, data flow, and component structure.

In real-world applications, slow UI interactions are usually symptoms of deeper architectural problems rather than simple rendering inefficiencies.

The Problem

A common mistake is treating frontend performance as a purely visual or rendering issue. Developers often try to optimize components while ignoring the underlying data flow and system behavior.

• Repeated API calls fetching the same data
• Large payloads slowing down rendering
• State updates triggering unnecessary re-renders
• Tight coupling between UI and business logic

These issues accumulate and create noticeable performance bottlenecks.

System Design / Approach

The correct approach is to treat performance as a system problem. Instead of optimizing individual components, focus on reducing unnecessary work across the entire data flow.

• Minimize redundant data fetching
• Optimize API responses for frontend needs
• Control state updates carefully
• Decouple UI from heavy business logic

Implementation

Step 1: Reduce API Overfetching

Avoid fetching unnecessary data. Keep API responses minimal and tailored to the UI.

const data = await fetch("/api/notes?page=1");

Smaller payloads directly improve rendering speed.

Step 2: Cache Repeated Requests

Use caching to prevent duplicate API calls.

const cached = cache.get(key);

Caching reduces network overhead and improves responsiveness.

Step 3: Control State Updates

Avoid unnecessary state updates that trigger re-renders.

setState(prev => prev);

Only update state when values actually change.

Trade-offs