ReactJS React Performance Optimization Flashcards

24 sample cards from the React Performance Optimization deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. Why is useCallback important when passing handlers to memoized children?

   Without it, a new function reference is created each render, breaking React.memo's shallow comparison and forcing the child to re-render. useCallback preserves the reference so the memoized child can skip re-rendering.

2. What is the dependency array's role in useCallback and useMemo?

   It lists the reactive values the memoized function/value depends on. React re-creates the memoized result only when a listed dependency changes (by Object.is comparison); an empty array [] means it never changes after mount.

3. What happens if you omit the dependency array in useMemo or useCallback?

   Omitting the array causes the value/function to be recomputed on every render, defeating the memoization entirely and providing no performance benefit.

4. Compare React.memo, useMemo, and useCallback in one sentence each.

   React.memo memoizes a whole component to skip re-renders; useMemo memoizes a computed value; useCallback memoizes a function reference. All three rely on referential stability of dependencies/props.

5. What is the React Profiler?

   The React Profiler is a tool (available in React DevTools and as a <Profiler> component) that measures how often components render and the cost of rendering, helping identify performance bottlenecks.

6. What are the two ways to use the React Profiler?

   1) The Profiler tab in React DevTools, which records commits interactively. 2) The programmatic <Profiler> component from React, which fires an onRender callback with timing data.

7. What arguments does the Profiler component's onRender callback receive?

   onRender(id, phase, actualDuration, baseDuration, startTime, commitTime): id of the tree, phase ('mount' or 'update'), actualDuration (time to render this commit), baseDuration (estimated time without memoization), and timing timestamps.

8. In the Profiler onRender callback, what does actualDuration measure?

   actualDuration is the time spent rendering the Profiler subtree for the current commit. It should decrease over subsequent commits if memoization is working, since only changed components re-render.

9. In the Profiler, what does baseDuration represent?

   baseDuration is the estimated time to render the entire subtree without any memoization, i.e. the worst-case cost. Comparing it to actualDuration shows how much memoization saves.

10. What is a 'commit' in the React Profiler?

    A commit is a single point where React applied changes to the DOM. The Profiler records each commit separately, letting you inspect which components rendered and how long each took during that commit.

11. What is a flame graph in the React Profiler?

    A flame graph is a visualization where each bar represents a component in the render tree; the bar's width/color indicates how long that component took to render in the selected commit, making expensive components easy to spot.

12. What is the 'ranked' chart in the React Profiler?

    The ranked chart lists the components that rendered in a commit ordered from most to least time spent, so you can immediately identify the single most expensive components.

13. What is the difference between the 'mount' and 'update' phase in the Profiler?

    'mount' is the initial render when the component tree is first added to the DOM; 'update' is a subsequent re-render caused by state, props, or context changes. The phase argument in onRender distinguishes them.

14. Why should performance profiling be done in production/optimized builds?

    Development builds include extra checks, warnings, and no minification, making them significantly slower. Profiling a production build gives realistic timings; React provides a special profiling build for accurate DevTools measurement.

15. What are Core Web Vitals?

    Core Web Vitals are Google's key user-centric performance metrics: Largest Contentful Paint (LCP, loading), Interaction to Next Paint (INP, responsiveness, replacing FID), and Cumulative Layout Shift (CLS, visual stability).

16. What does Largest Contentful Paint (LCP) measure and what is a good threshold?

    LCP measures the time until the largest visible content element renders. A good LCP is $\leq 2.5$ seconds; needs improvement is $2.5$ to $4.0$ s; poor is $> 4.0$ s.

17. What does Cumulative Layout Shift (CLS) measure and what is a good value?

    CLS measures unexpected layout movement of visible content during page load (visual stability). A good CLS score is $\leq 0.1$; poor is $> 0.25$. It is a unitless score.

18. What does Time to First Byte (TTFB) measure?

    TTFB measures the time from the request until the first byte of the response is received from the server. It captures server responsiveness and network latency and is a foundation for other loading metrics.

19. What is First Contentful Paint (FCP)?

    FCP measures the time from navigation until the browser renders the first piece of DOM content (text, image, etc.). A good FCP is $\leq 1.8$ seconds.

20. How do you compute a component's average render time from Profiler data over $n$ commits?

    Sum the actualDuration values and divide by the number of commits: $$\bar{t} = \frac{1}{n}\sum_{i=1}^{n} t_i$$ where $t_i$ is the actualDuration of commit $i$.

21. What is a common cause of a slow component that re-renders too often?

    Unstable references (new objects, arrays, or functions created inline each render) passed as props or context values, causing children to re-render. Fix with useMemo, useCallback, and React.memo.

22. Name three strategies to optimize a slow-rendering list.

    1) Windowing/virtualization (render only visible rows, e.g. react-window). 2) Provide stable, unique key props. 3) Memoize row components with React.memo to avoid re-rendering unchanged rows.

23. What is windowing (virtualization) and when is it useful?

    Windowing renders only the subset of list items currently visible in the viewport (plus a small buffer) instead of the whole list. It is essential for long lists/tables, drastically reducing DOM nodes and render time.

24. What is the general workflow to optimize a slow React component?

    1) Measure with the Profiler to find the bottleneck. 2) Identify the cause (frequent re-renders, expensive computation, large DOM). 3) Apply the fix (memoization, virtualization, code splitting, state colocation). 4) Re-profile to confirm the improvement.

What this deck covers

React Performance Optimization flashcards FAQ