Profile before changing anything: record a typing session and see whether the time goes into the filter computation, into rendering rows, or into layout and paint. The usual fixes, in order of payoff, are virtualizing so only visible rows render, deferring the filtered value with useDeferredValue or a transition, memoizing the row component, and keeping the input's state separate from the list.
Why interviewers ask this
This is a performance question with an obvious wrong answer, which is guessing and sprinkling useMemo everywhere. The interviewer wants to see a measurement first approach, correct reading of profiler output, and knowledge of which lever actually matters at this scale. They also want to hear you separate the two distinct problems, an input that feels sticky and a list that takes too long to render.
How to structure your answer
- Say you measure first and name the tool you use.
- Split the problem: slow input feel versus slow list render.
- Give the fixes in order of impact, ending at virtualization.
- Mention verifying the fix with the same measurement.
Example answer
I would record it in the React Profiler and the browser performance panel before touching code, because there are three different causes that feel identical. If the commit is huge, it is the rows. If the scripting time is in my filter function, it is the data. If it is layout thrashing, something is measuring the DOM per row. Nine times out of ten with a few thousand rows it is simply that all of them are rendering, so virtualization is the big win, rendering only the visible window plus a small overscan. On top of that I separate the two updates: the input stays urgent so typing feels instant, and the filtered result goes through a transition or useDeferredValue so React can drop stale work when the next keystroke arrives. Memoizing the row component helps once the list is virtualized, less so before. I did this on a customer list that felt unusable at about four thousand rows, and virtualization plus a deferred value took the interaction from roughly four hundred milliseconds to under sixteen.
Walking into this interview soon? GhostPilot listens to your live call, spots the question the moment it is asked, and puts a structured answer on your screen in real time. Try it on your next mock, or grab a $29 Session Pass, no subscription, for the real thing.
See how it worksFollow-up questions to expect
- What overscan value would you pick and why?
- How would virtualization affect accessibility and browser find on page?
- Would you move the filtering to the server, and at what point?
Related react developer questions
Your interviewer will ask their own version of this. Paste your actual job description into the free Question Predictor and get the 20 questions that role is most likely to ask, with what each one is really probing.
Predict my questions