Performance in React and Next.js (Lydia Hallie)

Summary

In this talk, Lydia Hy explores the concurrent features introduced in React 18 and their integration within Next.js to enhance web performance. She discusses the challenges of long tasks that block the main thread and the importance of efficient rendering for user interactions. By leveraging features like low-priority updates and React Server Components, developers can create more responsive applications. Next.js enhances these capabilities with its app router, enabling persistent UI and optimized data fetching. The result is a framework that allows developers to build high-performance applications with minimal effort, significantly improving user experiences.

Takeaways

• 😀 JavaScript executes on a single thread, which can cause delays in user interactions during long tasks.
• 😀 Long tasks exceeding 50 milliseconds can block the main thread, leading to poor user experiences and visual delays.
• 😀 Metrics like Total Blocking Time (TBT) and Interaction to Next Paint (INP) are essential for measuring web performance.
• 😀 React 18 introduces concurrent rendering, allowing developers to mark updates as low priority to enhance responsiveness.
• 😀 The render phase and commit phase in React are non-interruptible, which can lead to significant delays during complex computations.
• 😀 Using the `startTransition` function enables developers to defer low-priority updates, improving UI fluidity.
• 😀 React Server Components facilitate sending serialized component trees directly to the client, skipping traditional HTML and JavaScript rendering.
• 😀 The Suspense feature in React 18 enhances data fetching by allowing components to wait for data while providing loading states.
• 😀 Next.js leverages React 18's features to improve performance, including implicit component creation through the file system.
• 😀 Partial pre-rendering in Next.js enables static content delivery while maintaining dynamic behavior for specific components.

Q & A

What are the main issues with JavaScript execution on the main thread?

JavaScript runs on a single thread known as the main thread, which handles not only script execution but also user events, network requests, and timers. When a long task exceeds 50 milliseconds, it can block other tasks, leading to delayed user interactions and a poor experience.

What is the significance of the 50 milliseconds threshold?

Tasks exceeding 50 milliseconds can cause noticeable delays in user interactions, as the main thread is occupied with processing the long task, which prevents the browser from responding to user events immediately.

How does React's rendering process contribute to performance issues?

React's rendering process is divided into two phases: the render phase and the commit phase. Both phases are non-interruptible, meaning that once React starts rendering, it cannot pause to handle other events, which can lead to visual delays during complex updates.

What are 'long tasks,' and how are they measured?

Long tasks are operations that take too long to execute on the main thread, which can block user interactions. They are measured using Total Blocking Time (TBT) and Interaction to Next Paint (INP), with the goal of keeping both metrics below 200 milliseconds.

What changes does React 18 introduce to address long tasks?

React 18 introduces concurrent features that allow developers to mark certain updates as low priority. This enables the main thread to yield control during rendering, allowing for more responsive user interactions.

How does the startTransition function work in React 18?

The startTransition function allows developers to mark updates that can be deferred. This means React can continue to process other user interactions while the low-priority update is rendered in the background, improving responsiveness.

What are React Server Components, and why are they beneficial?

React Server Components allow developers to send serialized component trees to the client, skipping the intermediate HTML and JavaScript rendering steps. This results in faster loading times and allows for direct data fetching within components.

What role does Suspense play in React 18?

Suspense allows React to delay the rendering of components until certain conditions are met, such as waiting for data to load. This functionality improves perceived performance by allowing a fallback UI to be displayed while loading.

How does Next.js enhance the features of React 18?

Next.js leverages React 18's concurrent features to improve both developer and user experience. It enables implicit component creation, persistent UI during navigation, and faster rendering through partial pre-rendering and automatic handling of transitions.

What is partial pre-rendering in Next.js, and how does it improve performance?

Partial pre-rendering allows Next.js to render components that do not require request data as static HTML, while still enabling dynamic rendering for specific components. This improves initial load times and overall performance by reducing blocking during navigation.