Architecture Deep Dive
STATE MASTERY
How I tackled re-render lag, managed complex React lifecycles, and built a millisecond-precise stopwatch without compromising browser performance.
The Re-render Trap
A common mistake when building a React timer is tying the setInterval directly to a state variable that updates every millisecond. This forces React to re-render the entire component tree constantly, leading to severe UI lag and high CPU usage.
The useRef Solution
To solve this, I leveraged useRef. Unlike useState, mutating a ref does not trigger a re-render. I used refs to securely store the interval ID and the precise start time, ensuring the background logic could run at maximum speed while only updating the display state when absolutely necessary.
// Managing interval without re-renders
const intervalRef = useRef(null);
const [time, setTime] = useState(0);
const startTimer = () => {
if (intervalRef.current) return;
const startTime = Date.now() - time;
intervalRef.current = setInterval(() => {
// Calculates delta even if browser throttles
setTime(Date.now() - startTime);
}, 10);
};
const stopTimer = () => {
clearInterval(intervalRef.current);
intervalRef.current = null;
};ADDITIONAL OPTIMIZATIONS
Dynamic Lap Array
Engineered a state-managed array to capture absolute timestamps, dynamically calculating the difference between laps on the fly without halting the main timer thread.
Cleanup Functions
Implemented strict useEffect return callbacks to immediately clear setInterval processes when the component unmounts, guaranteeing zero memory leaks.
Fluid UI Rendering
Separated the heavy JavaScript calculations from the UI presentation layer, utilizing CSS hardware acceleration (GPU) for button hovers and layout shifts.