Optimizing Our React Performance

Performance optimization in React is often about identifying and removing unnecessary work. This article details a real-world scenario where the Levels.fyi team used the React Profiler to improve the performance of their Employers Dashboard by identifying and fixing common re-render issues.

The author describes two specific cases where performance was impacted. In the first case, toggling an accordion was taking 60ms because a useState hook in the parent component was causing the entire component tree to re-render. By moving the state down to the specific child component and using useCallback and useMemo, they reduced the render time to 11ms—a 5.5x improvement. The second case involved a settings modal that triggered sibling re-renders; wrapping the unaffected child component in React.memo provided a 10x performance boost.

Key Concepts

• React Profiler: A built-in tool for measuring the "cost" of rendering and identifying which components are rendering and how long they take.
• State Collocation: Moving state as close as possible to where it is used (down the component tree) to prevent parent updates from re-rendering the entire tree.
• Memoization: Using React.memo, useCallback, and useMemo to prevent components or functions from being re-created or re-rendered unless their dependencies change.
• Unnecessary Re-renders: Rendering components when their props or state have not effectively changed, which is a primary source of performance degradation in React apps.