Previous page re-rendered when navigate to the other when using defer, useLoaderData [Bug]:

[TonyFTannous]

What version of React Router are you using?

6.14.2

Steps to Reproduce

I use useLoaderData, defer and Suspense/await ...

when i navigate from secreen to other, the previous one re-rendered, why??? is it normal and how can i prevent the current screen from re-rendered when i navigate to other

thanks

Expected Behavior

When i navigate from secreen to other, the previous one re-rendered

Actual Behavior

Prevent the current screen from re-rendered when i navigate to other

[brophdawg11]

This is expected behavior. When you navigate, React Router updates useNavigation().state from idle to loading and remains on the current page while the loaders run for the next page. This causes the current page to re-render so that it can show any pending/optimistic UI based on useNavigation().

Re-renders are at the heart of React and are usually not an issue unless you have expensive/slow components, and you can optimize them individually if they are problematic: https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render