make nextjs faster using react-scan

It takes 5 minutes

In this tutorial, we'll explore how to identify and fix performance bottlenecks in your NextJS application using react-scan, a tool made by Aiden Bai. This powerful tool helps you understand where slow renders occur and why, allowing you to make targeted optimizations.

Why Performance Matters in NextJS Apps

Before diving into the implementation, let's understand why performance optimization is crucial:

User Experience: Faster apps lead to better user engagement and lower bounce rates
SEO Ranking: Page speed is a significant factor in search engine rankings
Conversion Rates: Studies show that a 1-second delay in page load can reduce conversions by up to 7%
Mobile Experience: Performance issues are amplified on mobile devices with slower connections
Cost Efficiency: Optimized apps consume fewer server resources, potentially reducing hosting costs

What is react-scan?

React-scan is a lightweight performance monitoring tool that helps identify slow renders in your React applications. It works by:

Measuring component render times
Identifying unnecessary re-renders
Highlighting performance bottlenecks
Providing actionable insights for optimization

The best part? It requires minimal setup and works seamlessly with NextJS applications.

Getting Started with react-scan

Let's implement react-scan in your NextJS application in just two simple steps:

Step 1: Install react-scan

First, add react-scan to your project using your package manager. Since we're using pnpm at RealReview.Space, we'll use:

bash

pnpm add react-scan

This will add the package to your dependencies in package.json.

Step 2: Add the Script to Your Layout

Next, you need to add the react-scan script to your application's layout file. The key is to add this script before any other scripts to ensure it can properly monitor all rendering activities.

Open your app/layout.tsx file (or create it if it doesn't exist) and add the script tag:

tsx

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script src="https://unpkg.com/react-scan/dist/auto.global.js" />
        {/* rest of your scripts go under */}
      </head>
      <body>{children}</body>
    </html>
  );
}

That's it; react-scan is now integrated into your NextJS application.

Using react-scan to identify Performance Issues

Once you've installed react-scan, you can start identifying performance bottlenecks in your application. Here's how:

Viewing Performance Metrics

Run your application in development mode (pnpm dev)
Navigate to the bottom right "React Scan" floating button
Interact with your application to see real-time performance metrics like the one's below.

Understanding the Metrics

React-scan provides several key metrics:

Component Render Time: How long each component takes to render
Re-render Count: How many times a component re-renders
Prompts for fixing: A prompt describing the issue, which can be fed into your AI code editor

Using the Performance Data

Once you've collected performance data with react-scan, use it to make informed decisions about optimizing your application. Here are some general tips:

Focus on frequently re-rendered components: Components that re-render often are prime candidates for optimization.
Look for render cascades: When one component re-renders, it can trigger re-renders in child components. Identifying these cascades can help you break unnecessary render chains.
Identify wasted renders: Components that re-render without any visible changes are wasting CPU cycles.
Measure before and after: After making optimizations, run react-scan again to measure the improvement.

Remember that premature optimization can lead to more complex code without significant benefits. Always measure first, then optimize where it matters most.

Conclusion

With react-scan, you can identify exactly where performance bottlenecks occur and make targeted optimizations to improve your app's speed and user experience.

Remember that performance optimization is an ongoing process. As your application grows and changes, new performance issues may arise. Regularly using react-scan as part of your development workflow can help you catch and fix these issues before they impact your users.

Here's the video tutorial

Join Ari on Peerlist!

Join amazing folks like Ari and thousands of other people in tech.

Create Profile

Join with Ari’s personal invite link.