[Bug]: Component causing incorrect re-renders

[brophdawg11]

What version of React Router are you using?

6.9.0

Steps to Reproduce

Original Discord thread

let router = createBrowserRouter([
  {
    path: "/",
    Component: Layout,
    children: [
      {
        index: true,
        Component: Index,
      },
      {
        path: "a",
        Component: A,
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

function Layout() {
  console.log("rendering Layout");
  return (
    <>
      <Link to="/">Home</Link>&nbsp;&nbsp;
      <Link to="a">A</Link>&nbsp;&nbsp;
      <Outlet />
    </>
  );
}

function Index() {
  console.log("rendering Index");
  return <h1>Index</h1>;
}

function A() {
  console.log("rendering A");
  return <h1>A</h1>;
}

Expected Behavior

Component shouldn't cause additional re-renders compared to element

Actual Behavior

Component causes additional re-renders because React.createElement is re-called each time

[brophdawg11]

Current workaround is to use Component: React.memo(Layout)

[MichaelDeBoey]

Fixed by #10287

[brophdawg11]

Reopening until this is released to npm

[brophdawg11]

Aligning with Remix here - will close this issue with awaiting release. This will be available when React Router 6.11 is released.

[github-actions]

🤖 Hello there,

We just published version 6.11.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.11.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!