Weride·Frontend Engineer·Technical Phone Screen·Senior

Senior

May 2026

Summary

Weride frontend interview had me implementing a custom React hook from scratch, which sounds manageable until you're live-coding and second-guessing every cleanup detail. The question had a few layers to it and the follow-up discussion about tab visibility caught me a bit flat-footed.

Questions Asked (1)

Build a custom React hook called useFps() that tracks and returns the current frames-per-second of the page, using requestAnimationFrame with a rolling time window to smooth the value, and properly cleans up when the component unmounts. Also discuss how the hook behaves when the tab is backgrounded and how you'd prevent unnecessary re-renders.

Technical Trade-offsSystem DesignAPI & Integrations

Author's notes

The core rAF loop wasn't hard to sketch out but I kept second-guessing the cleanup.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by outlining the hook's API and core implementation using requestAnimationFrame and a rolling window (e.g., a circular buffer of timestamps). Then discuss edge cases like tab backgrounding and strategies to minimize re-renders, such as throttling state updates or using refs. Finally, mention cleanup and potential performance trade-offs.

Pro tip: Emphasize that requestAnimationFrame pauses when the tab is backgrounded, so the hook should detect visibility changes and either pause updates or reset the window to avoid misleading FPS values. Also, consider using a ref to store the FPS value and only trigger re-renders at a lower frequency (e.g., once per second) to balance accuracy and performance.

1. Define the hook's API and state

Decide what the hook returns (e.g., a number representing FPS) and how often it updates. Use useState for the FPS value and useRef for mutable variables like frame timestamps and the animation frame ID.

2. Implement the measurement loop

Use requestAnimationFrame to recursively call a function that records the current timestamp, calculates the time delta from the previous frame, and maintains a rolling window of recent frame durations (e.g., last 60 frames). Compute FPS as the reciprocal of the average frame duration.

3. Handle cleanup and visibility changes

In a useEffect cleanup, cancel the animation frame. Also, listen to the visibilitychange event to pause the loop when the tab is hidden and resume when visible, resetting the rolling window to avoid skewed data.

4. Optimize re-renders

Throttle state updates to avoid re-rendering on every frame. For example, update the FPS state only once per second or when the value changes significantly. Alternatively, return a ref and let the consumer decide when to read it.

5. Discuss trade-offs and alternatives

Mention the trade-off between accuracy and performance: a larger rolling window smooths the value but reacts slower to changes. Also, note that requestAnimationFrame is tied to the display refresh rate, so FPS may be capped at 60 or 120 Hz.

Key Points to Mention

Use of requestAnimationFrame for frame timing and its automatic pausing when the tab is backgrounded.
Rolling window implementation (e.g., circular buffer) to smooth FPS and avoid jitter.
Cleanup with cancelAnimationFrame in useEffect to prevent memory leaks.
Visibility API (document.hidden or visibilitychange event) to handle tab backgrounding and reset the window.
Re-render optimization: throttling state updates, using refs, or returning a stable value.
Trade-offs: window size vs. responsiveness, and the fact that requestAnimationFrame is capped by the display refresh rate.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.