[v6.4] Unnecessary renderings ?

[kael]

I'm testing react-router 6.4.3 before an upgrade, following the tutorial, and there seems to be some unnecessary renderings.

With a build version, when navigating through the sidebar contacts list, clicking on one contact triggers two renderings of the Root component, with the contacts lists being logged twice in the console.

Also, again when clicking on a contact, the actual displayed contact is rendered before the URL change, followed by a rendering of the newly displayed contact, and so on: each time a contact is clicked, there are two renderings of the Contact component.

Code excerpts:

• routes/root.jsx

function Root() {
  const { contacts } = useLoaderData();
  console.log('Root contacts', contacts);
  // etc
}

• routes/contact.jsx

export default function Contact() {
  const contact = useLoaderData();
  console.log('Contact', contact);
  // etc
}

These are the traces logged when clicking on one contact:

index.83eb1588.js:72 Root contacts (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

index.83eb1588.js:72 Contact {id: 'vaintp5', createdAt: 1668671777715}

index.83eb1588.js:41 URL change.

index.83eb1588.js:72 Root contacts (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

index.83eb1588.js:72 Contact {id: 'cl0smql', createdAt: 1668671776993}

Should not the sidebar contacts list be logged and the Root component be rendered only when the contacts list changes and not on navigation ?

How to prevent those unnecessary renderings (and hence unnecessary DB queries upper in the chain) ?