Skip to content

Nested components result in multiple executions of the component #14557

@yibird

Description

@yibird

Reproduction

// Layout.tsx
import {  Outlet  } from 'react-router'
export default function Layout() {
  // const outlet = useOutlet()
  return <div>
    <div>Layout</div>
    {/* {outlet} */}
    <Outlet/>
  </div>
}
// routes.ts
import React from 'react'
import { createBrowserRouter } from 'react-router'

export const router = createBrowserRouter([
  {
        path: '/',
        Component: React.lazy(() => import('./Layout')),
        children: [
            {
                path:"/user",
            Component: React.lazy(() => import('./pages/user')),
            children: [
                  {
                    path:"/user/profile",
                    Component: React.lazy(() => import('./pages/user/UserProfile'))
                  }
                ]
            }
        ]
  },
])
// User.tsx
import { Outlet,useOutlet } from 'react-router'
export default function User() {
  const outlet = useOutlet();
  return <div>
    <div>User</div>
   {outlet}
  </div>
}
// UserProfile
export default function UserProfile() {
  return <div>UserProfile</div>
}
import { RouterProvider } from "react-router";
import { router } from "./routes";

export default function AppRouterPovider() {
  return <RouterProvider router={router}/>
}
import AppRouterPovider from './RouterProvider'

function App() {
  console.log("hello");
  return (
    <AppRouterPovider/>
  )
}

export default App

The three-layer nested components caused the App component to execute 7 times, which resulted in significant initialization performance overhead. I have turned off React strict mode

System Info

"dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-router": "^7.9.6"
  }

Used Package Manager

pnpm

Expected Behavior

The three-layer nested components caused the App component to execute 7 times, which resulted in significant initialization performance overhead. I have turned off React strict mode

Actual Behavior

The three-layer nested components caused the App component to execute 7 times, which resulted in significant initialization performance overhead. I have turned off React strict mode

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions