Dynamic routes and the useParams hook cause repeated rendering when parameters are not changed

[mattiabonardi]

Hi, I'm using the V7 and I don't understand why if I define a dynamic route (i.e path: :id ) when I change route maintaining the same id the useParams hook causes re renders. I expect that the useParams don't trigger a new re render if the param is the same.

import {
  BrowserRouter,
  Link,
  Outlet,
  Route,
  Routes,
  useParams,
} from "react-router";

function App() {
  return (
    <BrowserRouter basename="web">
      <Routes>
        <Route path=":id" element={<Layout />}>
          <Route path="child1" element={<Child id="1" />} />
          <Route path="child2" element={<Child id="2" />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const Layout: React.FC = () => {
  const { id } = useParams();
  console.log("LAYOUT RENDER", id);
  return (
    <>
      <Link to="child1">Child 1</Link>
      <Link to="child2">Child 2</Link>
      <div>Layout</div>
      <Outlet />
    </>
  );
};

const Child: React.FC<{
  id: string;
}> = ({ id }) => {
  console.log("child RENDER", id);
  return <div>Child {id}</div>;
};

export default App;

When I navigate from child1 to child2 the layout component re render. Removing the useParams hook It can't re renders.

Thank you so much