why-did-you-render
why-did-you-render copied to clipboard
Problem: React has detected a change in the order of Hooks called by BrowserRouter
Hello,
I have a problem with why-did-you-render
and react-router-dom
.
Problem
When I use the router and especially a link to change the page, this error is thrown:
Warning: React has detected a change in the order of Hooks called by BrowserRouter. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks
Previous render Next render
------------------------------------------------------
1. useRef useRef
2. useState useState
3. useLayoutEffect useRef
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The problem seems to be inside the BrowserRouter and only appears when the why-did-you-render
plugin is enable.
I've tried to add/remove React.StrictMode but it doesn't change anything.
Steps to reproduce
This issue can be reproduced with the starting template from Vite and the Typescript version.
// main.ts
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
(await import('@welldone-software/why-did-you-render')).default(React)
// App.ts
import { Link, useRoutes } from 'react-router-dom'
export default function App() {
const routes = useRoutes([
{ path: "/", element: <>1</> },
{ path: "/2", element: <>2</> },
{ path: "/3", element: <>3</> },
])
return (
<>
<Link to="/">1</Link><br />
<Link to="/2">2</Link><br />
<Link to="/3">3</Link><br />
<br />
{routes}
</>
)
}
Version of libraries:
- react-dom: v18.2.0
- react-router-dom: 6.3.0
- @welldone-software/why-did-you-render: 7.0.1
I'm not sure what to try to fix or work around this problem, so thanks in advance for your help 🙏