3 Optimizing React performance

 

This chapter covers

  • Understanding React rendering
  • Optimizing performance using memoization
  • Controlling rendering with dependency arrays

Navigating the complex world of React development requires more than just coding skills; it also demands an in-depth understanding of how React components behave and render. Have you ever pondered why a component re-renders or perhaps why it refuses to do so? The answers are often hidden in the subtle interplay of component relationships, state changes, and React’s internal rendering logic.

Dispelling common myths about React rendering is essential. The idea that component re-renders are triggered only by property changes, for example, is a misconception that could lead developers astray. Understanding these nuances is key to writing efficient and effective React code.

Two of the central topics when it comes to (mis)understanding how React renders are memoization and dependency arrays. Memoization—a cornerstone in React optimization—is a technique centered on rendering efficiently and avoiding unnecessary recalculations. Using React’s memo(), useMemo, and useCallback hooks effectively can significantly enhance your application’s performance.

3.1 Understanding React rendering

3.1.1 Changing properties is irrelevant

3.1.2 Repeated function calls in Strict Mode while in development

3.2 Optimizing performance by minimizing re-rendering

3.2.1 Memoize a component

3.2.2 Memoize part of a component

3.2.3 Memoize properties to memoized components

3.2.4 Memoization hooks in detail

3.3 Understanding dependency arrays

3.3.1 What are dependencies?

3.3.2 Run on every render by skipping the dependency array

3.3.3 Skip stable variables from dependencies

3.3.4 Get help maintaining dependency arrays

Summary