React's New Activity Component: Huge Performance Win!

Key Concepts

• Activity Component: A new experimental React component for managing the rendering priority of UI elements.
• Mounting/Unmounting: Adding and removing components from the DOM, causing full state resets and rerenders.
• CSS Toggling: Hiding and showing components using CSS, keeping them rendered in the DOM regardless of visibility.
• Virtual DOM (VDOM): An in-memory representation of the UI, allowing React to efficiently update the actual DOM.
• Low Priority Task: Rendering components in the background with lower priority, minimizing impact on the main thread and user interactivity.
• Frames Per Second (FPS): A measure of the smoothness of animations and UI updates.
• User Event Processing: The responsiveness of the UI to user interactions like typing or clicking.

Performance Comparison: DOM Manipulation vs. CSS Toggling

The video begins by demonstrating a dashboard-like application with multiple graphs and an input field. The initial implementation uses two approaches for showing and hiding graphs:

1. Mounting/Unmounting from the DOM: This approach involves completely removing and adding graph components to the DOM when toggled. While it initially renders only visible graphs, leading to a decent FPS (around 55), adding more graphs causes significant performance degradation, dropping FPS to the 20s-30s. The key issue is the full state reset and rerender of the component upon each toggle.
2. CSS Toggling: This approach renders all 50 graphs regardless of visibility, using CSS to hide or show them. This results in extremely poor performance, with very low FPS and unresponsiveness, making it an unacceptable solution.

Introducing the Activity Component

The video then introduces the experimental unstable_Activity component from the experimental React build. This component offers a third approach that sits between mounting/unmounting and CSS toggling.

• Installation: The video demonstrates how to switch to the experimental React build by modifying the package.json file and running a full reinstall.
• Usage: The unstable_Activity component requires a mode prop, which can be either visible or hidden. The component wraps the UI element that needs to be conditionally rendered.

How Activity Component Works

The unstable_Activity component allows components to render even when they are not visible. However, it renders them as a low-priority task in the Virtual DOM (VDOM). This means:

• The component's state is maintained even when hidden.
• When the component needs to be shown, it can be quickly added to the DOM from the VDOM, as long as it's up to date.
• User interaction remains responsive because the rendering happens in the background.

The video notes that the React library dynamically adjusts the amount of background processing based on performance impact, ensuring that the main thread remains responsive. The video author observed that on one machine, React rendered up to graph 6, while on another, it rendered up to graph 10, indicating adaptive behavior.

Performance Benefits: Speed of Show

The video then focuses on the performance benefits of the unstable_Activity component in terms of the "speed of show" – the time it takes to make a hidden component visible.

• Measurement: The video measures the time it takes to add a graph to the DOM using the mounting/unmounting approach, finding it takes around 480 milliseconds.
• Activity Component Improvement: By using the unstable_Activity component, the time to show the graph is reduced to approximately 188 milliseconds. This is because the graph is already rendered in the VDOM, and React only needs to apply the VDOM changes to the actual DOM.

Conclusion

The unstable_Activity component offers a significant performance improvement for applications that require frequent showing and hiding of complex UI elements. It provides a middle ground between completely unmounting components and always rendering them with CSS toggling. By rendering components in the VDOM as a low-priority task, it maintains state, reduces the time to show, and keeps user interactions responsive. The video concludes that this component is a "fantastic win for performance-critical applications" and encourages engineers to try it out in the experimental branch. The speaker also expresses excitement about future features that might allow even finer-grained control over rendering priority.