On navigation previous route gets re-rendered before new one does.

[aachinfiev]

Hi everyone,

I am encountering a strange behavior and I am not sure if I am misconfiguring something or it's by design. Given the following router configuration:

function Parent() {
  const data = useLoaderData();
  console.log("test parent render", data);

  return (
    <div>
      Parent <NavLink to="/test/first">First</NavLink> <NavLink to="/test/second">Second</NavLink>
      <Outlet />
    </div>
  );
}

function First() {
  const data = useLoaderData();
  console.log("test first child render", data);

  return (
    <div>
      First
      <p>{data.url}</p>
    </div>
  );
}
function Second() {
  const data = useLoaderData();
  console.log("test second child render", data);

  return (
    <div>
      Second
      <p>{data.url}</p>
    </div>
  );
}

const routes = [
  {
    path: "/test",
    loader: (req) => {
      console.log("test parent loading", req);
      return true;
    },
    element: <Parent />,
    children: [
      {
        path: "first",
        loader: async ({ request }) => {
          console.log("test first child loading start", { request });

          await delay(1000);

          console.log("test first child loading end", { request });

          return { url: request.url };
        },
        element: <First />,
      },
      {
        path: "second",
        loader: async ({ request }) => {
          console.log("test second child loading start", request);
          await delay(1000);
          console.log("test second child loading end", request);
          return { url: request.url };
        },
        element: <Second />,
      },
    ],
  }
]

The following scenario results in weird rendering.

1. Visit /test/first which prints. This is ok

• test parent loading
• test first child loading start
• test first child loading end
• test parent render true
• test first child render

2. Click on Second link, which triggers navigation but renders first page once and then second page again

• test second child loading start url: '/test/second
• test parent render true
• test first child render {url: '/test/first'}
• test second child loading end Request {url: '/test/second'}
• test parent render true
• test second child render {url: '/test/second'}

For me entries in bold above should not happen. The questions I have are the following:

1. Shouldn't child render not wait for loader to complete before rendering?
2. Why does it render child with previous page again upon navigation?
3. Why does it re-render parent component that contains an outlet? Parent loader doesn't re-run but component gets re-rendered. Isn't the point of outlet not to re-render the parent upon navigation?

FYI:

• I have Strict.Mode turned off (which can cause even more rendering (4 times instead of usual 2) on top of this).
• I am using version "react-router-dom": "^6.21.3",

Can someone please shed some light on this behavior?

Thank you very much.

Alex

[process0]

See #7634