Skip to content
tezvyn:

React Profiler long render duration: causes and next steps?

Source: react.devMediumHow cards are made

React Profiler long render duration: causes and next steps?

Tests interpreting actualDuration vs baseDuration. Outline: close values on updates mean broken memoization—add memo or useMemo; high baseDuration alone means an inherently slow subtree. Red flag: proposing fixes before comparing these two Profiler metrics.

What's really being asked

whether you treat Profiler data as a diagnostic signal rather than a raw number. The interviewer cares if you know that actualDuration and baseDuration are meant to be compared, and that phase tells you whether you are looking at a mount or an update.

The full answer

four things in order. First, explain that actualDuration is the milliseconds React spent rendering the profiled subtree for the current commit, while baseDuration estimates the milliseconds it would take to re-render the entire subtree without any optimizations like memo or useMemo. Second, compare the two numbers during an update phase. If actualDuration is close to baseDuration, memoization is not working and many descendants are re-rendering unnecessarily; the next step is to add memo or useMemo and verify that actualDuration drops while baseDuration stays roughly the same. Third, if baseDuration itself is high even when actualDuration is low, the component tree is inherently expensive to render regardless of memoization; the next step is to reduce what the subtree renders. Fourth, check the phase parameter. A high duration during mount is expected because every component must render for the first time, whereas a high duration during update is the real regression to fix.

The mistakes people make

three patterns. First, ignoring the actualDuration versus baseDuration comparison and proposing unrelated changes instead. Second, treating a high mount phase duration as an update regression and adding memoization where it cannot help on initial render. Third, forgetting that profiling adds overhead and is disabled in production by default, so metrics should be validated in a profiling-enabled build.

What usually comes next

the interviewer might ask how you would verify that memo is actually preventing re-renders, or what you would do if actualDuration is low but the UI still feels sluggish, or how you enable profiling in a production build.

A concrete example

you profile a dashboard widget and see an actualDuration of 80 milliseconds and a baseDuration of 78 milliseconds on every filter update. Because the values are nearly identical, you conclude memoization is failing. You wrap the child list in memo and memoize the computed data with useMemo. On the next update, actualDuration falls to 4 milliseconds while baseDuration remains 75 milliseconds, confirming the subtree is still expensive in theory but now skipped in practice.

Interview question

A Profiler reports actualDuration 80 ms and baseDuration 78 ms during an update. What does this suggest?

  • a.The profiling overhead makes these figures unusable for diagnosis
  • b.Memoization is failing and descendants are re-rendering unnecessarilyCorrect
  • c.The subtree is inherently slow regardless of memoization
  • d.The high duration is expected because every component must mount
Why?

When actualDuration is nearly equal to baseDuration during an update, React is not skipping any descendants via memoization, so adding memo or useMemo should drop actualDuration while baseDuration remains high. Option C would be correct if baseDuration were high but actualDuration were low, indicating an inherently expensive subtree that is already being memoized.

Just read this? Test yourself on what you have been reading.

Read the original → react.dev

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.

See open roles