[Bug]: React. Lazy() combined with Outlet causes extra rendering of parent component

[yibird]

What version of React Router are you using?

6

Steps to Reproduce

question: React. Lazy() combined with Outlet causes extra rendering of parent component。
version: 6。
example:

const Parent = () => {
    console.log("render parent")
    return <div>
        <h1>parent</h1>
        <Outlet/>
    </div>
}

const AComponent=React.lazy(()=>import('./demo/A'));
const BComponent=React.lazy(()=>import('./demo/B'));
const CComponent=()=>{
    console.log("render C")
    return <div>C</div>
}
const DComponent=()=>{
    console.log("render D")
    return <div>D</div>
}

export default function App() {
    return <Suspense fallback={<Fallback/>}>
        <BrowserRouter>
            <Link to="/">parent</Link>
            <br/>
            <Link to="/a">a</Link>
            <br/>
            <Link to="/b">b</Link>
            <br/>
            <Link to="/c">c</Link>
            <br/>
            <Link to="/d">d</Link>
            <Routes>
                <Route path="/" element={<Parent/>}>
                    <Route path="/a" element={<AComponent/>}></Route>
                    <Route path="/b" element={<BComponent/>}></Route>
                </Route>
                <Route path="/" element={<Parent/>}>
                    <Route path="/c" element={<CComponent/>}></Route>
                    <Route path="/d" element={<DComponent/>}></Route>
                </Route>
            </Routes>
        </BrowserRouter>
    </Suspense>
}

describe:
If the current access URL is /a or /b, refreshing the browser will print "parent" twice because the component uses React.lazy().
If the current access URL is /c or /d, refreshing the browser will only print "parent" once, because the component is imported normally.

expect: to execute parent only once when React.lazy() is used

Expected Behavior

to execute parent only once when React.lazy() is used

Actual Behavior

If the current access URL is /a or /b, refreshing the browser will print "parent" twice because the component uses React.lazy().
If the current access URL is /c or /d, refreshing the browser will only print "parent" once, because the component is imported normally.

[timdorr]

This is expected behavior. You're wrapping everything in Suspense, which is swapping out the entire tree for your Fallback component while anything underneath it is suspended.

[yibird]

I don't think it should be. This will lead to unnecessary rendering. Is there a solution?

[designbyadrian]

I don't think it should be. This will lead to unnecessary rendering. Is there a solution?

Don't wrap everything in suspense, see this example:

react-router/examples/lazy-loading/src/App.tsx

Lines 42 to 46 in 2ee81d7

	element={
	<React.Suspense fallback={<>...</>}>
	<About />
	</React.Suspense>
	}

[woowalker]

@timdorr but why not rerender again when page not refresh but switch to b from a ? b is also lazy component