React 19 and Next.js 15: Solving Re-render Issues Without memo

The React and Next.js communities are buzzing with excitement as React 19 and Next.js 15 bring groundbreaking improvements to state management and rendering performance. One of the most significant advancements is the resolution of unnecessary re-renders in child components when the parent state changes, eliminating the need for memo in many cases.

The Problem: Unnecessary Re-renders
Traditionally, in React, when a parent component's state changes, all its child components re-render, regardless of whether their props have changed. To mitigate this, developers often use React.memo to prevent child components from re-rendering unnecessarily. While effective, this approach adds complexity to the codebase and can be challenging to manage in larger applications.

The Solution: React 19 and Next.js 15
With the release of React 19 (currently in RC) and Next.js 15 (also in RC), there's a significant shift in how React handles re-renders. The React team has introduced new optimizations that ensure child components do not re-render when the parent state changes unless it's necessary. This improvement simplifies state management and enhances performance out of the box.

Example: Without memo
Let's look at a simple example demonstrating this new behavior. We have a parent component that increments a counter every second and a child component that displays static content.

first you have to add React and React-Dom Rc and Next js Rc to your next js project and try the below code block to see the difference

npm install next@rc react@rc react-dom@rc

Parent Component:

// components/ParentComponent.js

import React, { useState, useEffect } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Counter: {counter}</p>
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

Child Component:

// components/ChildComponent.js

import React from 'react';

const ChildComponent = () => {
  console.log('Child component re-rendered');
  return (
    <div>
      <h2>Child Component</h2>
      <p>Received Counter:</p>
    </div>
  );
};

export default ChildComponent;

Next.js Configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    reactCompiler: true,
  },
};

export default nextConfig;

Observing the Change
With the setup above, you'll notice that even though the counter in the parent component increments every second, the ChildComponent does not re-render. This behavior is evident from the absence of console.log('Child component re-rendered') in the browser console with each counter increment.

Conclusion
React 19 and Next.js 15 are poised to revolutionize how developers handle component re-renders. By eliminating unnecessary re-renders of child components when parent state changes, these new versions reduce the need for memo and similar performance optimizations. This improvement leads to cleaner, more maintainable code and enhanced application performance. As these versions move from RC to stable, developers can look forward to a more efficient and streamlined development experience.

Upgrade your projects to React 19 and Next.js 15 RC today to experience these improvements firsthand, and stay tuned for the stable release to fully leverage the new capabilities.