Next.js Discord

Discord Forum

React Dev Tools showing false re-renders for sibling client components with no common state

Unanswered
Golden-winged Warbler posted this in #help-forum
Open in Discord
Golden-winged WarblerOP
I am seeing an odd behavior in Next.js using client components. I have two <Button /> components rendered in my RootLayout. One directly in the body and one nested inside a <div>. Each button manages its own state with useState and logs rendered!! when it re-renders.
When I click the first button, its state increments and logs correctly, and the second button’s log doesn’t fire. Works as expected. But React Dev Tools still indicates that the second button is re-rendering. Notably, the react-scan package does not report these false re-render warnings.
What might be causing this? Has anyone else experienced this?
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Button from "./button";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Button />
        <div>
          <Button />
        </div>
        {children}
      </body>
    </html>
  );
}

"use client";

import { useState } from "react";

export default function Button() {
  const [count, setCount] = useState(0);
  console.log("rendered!!", count);

  return (
    <button
      className="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-full"
      onClick={() => setCount(count + 1)}
    >
      {count}
    </button>
  );
}

1 Reply

Golden-winged WarblerOP
Adding the components in pages similarly, shows the same behavior. The event from <Button/> in pages kind of bubbles up and re-renders(as per React Dev Tools) the components in layout. The component in layout is not re-rendering the pages components though.