why-did-you-render icon indicating copy to clipboard operation
why-did-you-render copied to clipboard

Problem: React has detected a change in the order of Hooks called by BrowserRouter

Open KirianCaumes opened this issue 2 years ago • 0 comments

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 🙏

KirianCaumes avatar Sep 10 '22 18:09 KirianCaumes