v7: When switching routes, components using useNavigate() will be re rendered

[yibird]

I'm using React Router as a...

library

Reproduction

import React from 'react';
import { createBrowserRouter, RouterProvider, useNavigate } from 'react-router';

function Test() {
  console.log('Test:');
  const navigate = useNavigate();
  return (
    <div>
      <button onClick={() => navigate('/test')}>test</button>
      <button onClick={() => navigate('/demo')}>demo</button>
    </div>
  );
}

function Demo() {
  console.log('Demo:');
  const navigate = useNavigate();
  return <div>demo</div>;
}

const AppLayout = React.memo(function AppLayout() {
  console.log('AppLayout:');

  return (
    <div>
      <Test />
      <Demo />
    </div>
  );
});

When clicking the button in the Test component to switch routes, the Demo component will also be re rendered, and theoretically it should not be re rendered. If the demo does not use useNavigate(), everything will be normal

System Info

window

Used Package Manager

npm

Expected Behavior

v7: When switching routes, components using useNavigate() will be re rendered

Actual Behavior

v7: When switching routes, components using useNavigate() will be re rendered

[MadMed677]

Note: the same problem with v6. When route changes - useNavigate will return a new instance

[yibird]

Is there any good way? This seriously affects performance

[MadMed677]

@yibird If you want to avoid this for now, you could wrap your useEffect or where you use it intouseRef to save a reference to the function. In that case your useEffect won't be affected by changing navigate

Or in your case, move the button which should trigger navigate() into separate function to re-render only this small component.

I don't know other options to avoid component re-rendering

[yibird]

This is not the most effective method. You can encapsulate a Hooks and use the history API to simulate the useNavigate() behavior