Video: Rendering: To Sync or Not to Sync?

The main topic of the talk is rendering in React and addressing issues related to synchronous and asynchronous rendering, particularly in versions 17 and 18.

When upgrading from React 17 to React 18, issues such as flashing rows and blanking out of rows during scrolling were encountered.

The speaker is Steve, and he works at Agigrid on the core grid team.

Row virtualization is a performance feature that ensures only the rows visible in the viewport are rendered. This is important to avoid crashing the browser and ensure smooth performance when displaying large amounts of data.

The DevTools profiler and React profiler were used to debug the rendering issues by comparing the performance and behavior between React versions 17 and 18.

The useSyncExternalStore feature in React 18 supports concurrent reads by forcing updates from a store to be synchronous, preventing visual tearing during rendering.

When considering performance on slower machines, it's important to test using tools like DevTools throttling or services like BrowserStack, and to ensure the application can degrade performance gracefully without significant user experience issues.

Upgrading to React 18 provides benefits such as new concurrent features, improved performance through automatic batching, and new hooks like useDeferredValue and useTransition.

In React 18, automatic batching combines multiple state updates into a single render, improving performance. In React 17, only state updates within event handlers were batched, leading to multiple renders in other scenarios.

FlushSync is a feature in React 18 that forces React to flush updates within a callback synchronously, ensuring the DOM is updated before performing other actions. This helps in resolving rendering issues and improving performance.