Most React performance problems stem not from heavy calculations, but from unnecessary re-renders caused by unstable object references in dependencies or rendering thousands of un-virtualized DOM elements.
Golden Dependency Rule
Never place un-memoized object literals or inline functions in useEffect dependencies. Prefer primitive values (strings, numbers, booleans) or lift state mutations out of effect callbacks.
1// BAD: Re-runs on every render because options object reference changes2300 font-medium">useEffect(() => {3 300 font-medium">fetchData(options);4}, [options]);56// GOOD: Depend on primitive values or stable reference7400 font-semibold">const optionsKey = JSON.300 font-medium">stringify(options);8300 font-medium">useEffect(() => {9 300 font-medium">fetchData(options);10}, [optionsKey]);Rendering 5,000 table rows degrades DOM tree performance. Virtualization keeps only the visible window (10-20 items) mounted:
| List Length | Standard DOM Mount | Virtual List Mount | FPS Delta |
|---|---|---|---|
| 100 items | 12 ms | 2 ms | 60 FPS (Both) |
| 1,000 items | 180 ms | 4 ms | 32 FPS -> 60 FPS |
| 10,000 items | 2,400 ms (Jank) | 5 ms | 5 FPS -> 60 FPS |
Building Resumetrix: Architecting an ATS Resume Parser & AI Engine with Gemini 1.5 Pro & WebAssembly
A deep dive into how I built Resumetrix—an AI career toolkit that parses complex PDFs in-browser via WebAssembly, computes semantic embedding matches, and stream-optimizes resumes for Applicant Tracking Systems.
Final-Year CS Student & Full-Stack / AI Developer
Integrating Gemini 1.5 Pro into Web Applications: Streaming, Functions, & Schema Validation
A comprehensive guide to building production-grade server-side proxies for the Google GenAI SDK with structured response validation, token usage monitoring, and zero-latency SSE streaming.
Final-Year CS Student & Full-Stack / AI Developer