Why useNavigate hook in react-router v6 triggers waste re-renders and how to solve it

While optimizing performance in one of my React.js projects I stumbled upon components re-rendering for no apparent reason whatsoever. After some experiments the culprit was found: import { useNavigate } from "react-router-dom" // v6 const Component = () => { const navigate = useNavigate() ... } Turns out that if you use the useNavigate hook in a component, it will re-render on every call to navigate() or click on <Link />, even if the path has not changed....

2022-04-28 · 3 min