ReactJS React Performance Optimization Syllabus

React Performance Optimization syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React Performance Optimization in ReactJS, not a summary of it.

1. 1

   Code Splitting

   3 topics

   • What is Code Splitting?
   • Implementing Code Splitting
   • Lazy Loading Components
2. 2

   Memoization

   3 topics

   • Using React.memo
   • Using useMemo
   • Using useCallback
3. 3

   Performance Monitoring

   3 topics

   • Using React Profiler
   • Analyzing Performance Metrics
   • Optimizing Slow Components

React Performance Optimization flashcards for ReactJS

23 of 50 cards from the React Performance Optimization deck — real questions with worked answers.

1. What is code splitting in React?

   Code splitting is the technique of breaking a large application bundle into smaller chunks that are loaded on demand, rather than shipping one giant JavaScript file. It reduces the initial bundle size and improves initial load time.

2. What problem does code splitting solve?

   It solves the problem of large initial bundles that delay the first meaningful paint. Instead of forcing users to download all code upfront, only the code needed for the current view is loaded, deferring the rest until needed.

3. Which bundlers support code splitting out of the box for React apps?

   Modern bundlers such as Webpack, Rollup, Vite, and Parcel support code splitting automatically, primarily through the dynamic import() syntax which creates separate chunks.

4. What JavaScript syntax is the foundation of code splitting?

   The dynamic import() expression, e.g. import('./MyModule'), which returns a Promise and tells the bundler to create a separate chunk that is fetched at runtime.

5. What is the difference between static and dynamic imports regarding code splitting?

   A static import (import X from './x') is bundled into the main chunk at build time. A dynamic import (import('./x')) returns a Promise and creates a separate chunk loaded at runtime, enabling code splitting.

6. What is route-based code splitting?

   Route-based code splitting splits the bundle along route boundaries, loading the code for a page only when the user navigates to that route. It is one of the most effective splitting strategies because users rarely visit every route.

7. How do you implement code splitting for a React component using built-in APIs?

   Use React.lazy with a dynamic import: const MyComp = React.lazy(() => import('./MyComp')). React.lazy returns a component that loads the chunk when first rendered.

8. What must wrap a React.lazy component and why?

   A <Suspense> boundary must wrap it, because the lazily loaded component may not be ready immediately. Suspense provides a fallback UI (e.g. a spinner) to show while the chunk is loading.

9. Write a minimal example of code splitting with React.lazy and Suspense.

   const Chart = React.lazy(() => import('./Chart')); function App() { return ( <Suspense fallback={<Spinner />}> <Chart /> </Suspense> ); }

10. What is the required prop on the Suspense component?

    The fallback prop, which specifies the React element to render while the lazily loaded children are still loading (e.g. fallback={<Loading />}).

11. What is lazy loading of components?

    Lazy loading defers the loading of a component's code until it is actually needed (e.g. rendered for the first time), rather than including it in the initial bundle. In React this is done with React.lazy plus Suspense.

12. What are the constraints on modules used with React.lazy?

    React.lazy only works with default exports. The dynamic import must resolve to a module whose default export is a React component. Named exports must be re-exported as default or wrapped.

13. How can you lazy load a named export with React.lazy?

    Re-export it as default in an intermediate module, e.g. React.lazy(() => import('./MyComp').then(m => ({ default: m.NamedComp }))), because React.lazy expects a module with a default export.

14. What is an error boundary's role with lazy loading?

    If a lazily loaded chunk fails to load (e.g. network error), the promise rejects. An Error Boundary placed above the Suspense catches this failure and can show a fallback error UI, preventing a crash.

15. What is React.memo?

    React.memo is a higher-order component that memoizes a functional component, skipping re-render when its props are shallowly equal to the previous props. It optimizes components that render the same output for the same props.

16. What kind of components benefit most from React.memo?

    Pure functional components that render often with the same props, are relatively expensive to render, and receive props that change infrequently. Cheap or always-changing components gain little or nothing.

17. By default, how does React.memo compare props?

    It performs a shallow comparison of each prop between the previous and next render. If all props are referentially equal (===), it skips the re-render.

18. How do you customize React.memo's comparison logic?

    Pass a second argument, an arePropsEqual(prevProps, nextProps) function that returns true to skip the re-render and false to re-render. This overrides the default shallow comparison.

19. Why can passing an inline object or arrow function as a prop defeat React.memo?

    Inline objects/functions create a new reference on every render, so the shallow prop comparison always sees them as changed. React.memo then re-renders anyway. Use useMemo/useCallback to stabilize references.

20. What is useMemo?

    useMemo is a Hook that memoizes the result of an expensive computation, recomputing it only when one of its dependencies changes: const value = useMemo(() => compute(a, b), [a, b]).

21. What is the signature of useMemo?

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); the first argument is a factory function, the second is the dependency array.

22. When should you use useMemo?

    When a computation is genuinely expensive, or when you need a stable reference for a value passed to a memoized child (React.memo) or used in another Hook's dependency array.

23. Does useMemo run its factory during rendering or after?

    useMemo runs the factory during rendering. Therefore the factory must be pure and must not cause side effects; side effects belong in useEffect.

See more React Performance Optimization flashcards →

Planning React Performance Optimization for ReactJS

React Performance Optimization (ReactJS) FAQ