Fix Your Slow React App With React-Scan

Key Concepts

• React performance killers: excessive rendering and slow components.
• React Scan: A tool to identify and address these performance issues.
• TanStack Store: A simple state management library used in the demo app.
• Derived values: Values in a store that are automatically updated based on dependencies.
• useStore hook: A hook from TanStack Store that connects to React components.
• Selector function: A function used with useStore to select specific data from the store.
• FPS (Frames Per Second): A measure of performance, indicating how smoothly the application is running.

React Scan: Addressing Performance Killers

The video introduces React Scan, a tool designed to help developers identify and resolve two common performance bottlenecks in React applications: excessive rendering and slow components. The demonstration uses a TanStack Router app with a TanStack Store example to illustrate these issues.

Setting Up the Demo Application

1. Creating the App: The presenter uses create-ts-router-app with the add-ons flag to generate a TanStack Router application. The TanStack Store example is chosen for its suitability in demonstrating over-rendering.
2. TanStack Store Implementation: The store is created using the store function from TanStack Store. It holds firstName and lastName, and a fullName derived value that automatically updates when either name changes.
3. Component Usage: The useStore hook is used in the demo.store.tsx component to access and update the store's state. The firstName, lastName, and fullName components display the corresponding values from the store.

Integrating and Using React Scan

1. Installation: React Scan is installed as a dependency.
2. Enabling React Scan: In the main.tsx file, scan is imported from react-scan and enabled using scan({ enabled: true }). The order of import is important: react-scan should be imported before react.
3. Functionality: React Scan adds a visual indicator to the application, showing when components re-render. It highlights components that are rendering more than expected.

Identifying Over-Rendering

1. Introducing the Problem: The presenter intentionally introduces over-rendering by removing the selector function from the useStore hook in the firstName and lastName components. This causes the entire store object to be passed to the components, leading to unnecessary re-renders.
2. React Scan's Insight: React Scan highlights that all components are re-rendering whenever any field in the store is updated.
3. Detailed Analysis: Clicking on a component in React Scan reveals why it re-rendered, showing that the lastName changed even when only the firstName was modified. This level of detail is presented as superior to React DevTools.

Identifying Slow Components

1. Creating a Slow Component: The presenter modifies the fullName component to render each character individually using a Character component.
2. Adding Artificial Delay: The Character component is intentionally slowed down by adding a loop that performs a large number of calculations.
3. React Scan's Notification System: React Scan detects the FPS drop caused by the slow Character component and displays a notification.
4. Detailed Information: Clicking on the notification reveals that the Character component is the source of the performance issue, highlighting the excessive number of renders and their slow execution time.
5. AI Prompts: React Scan generates AI prompts that can be copied and pasted into tools like Claude or ChatGPT to get assistance in resolving the performance problem. The prompt includes relevant information about the component and the performance issue.

Infinite Red Sponsorship

The video includes a sponsorship segment for Infinite Red, a React Native consultancy. Infinite Red is praised for their expertise in React Native, their open-source contributions (including the Ignite framework), and their Chain React conference.

Conclusion

React Scan is presented as a valuable tool for identifying and addressing performance issues in React applications. It helps developers pinpoint excessive rendering and slow components, providing detailed information and AI-powered assistance to resolve these problems. The tool is free to use and offers insights beyond those available in standard React DevTools.