BrowserOnly, lazy, and useHistory result in infinite re-rendering

[yeonjuan]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Recently, typescript-eslint updated docusaurus to the lastest version and there is an issue with infinite rendering when the url hash changed. (typescript-eslint/typescript-eslint#8736)

The problem occurs when a lazy loaded component within a <BrowserOnly/> changes the hash via useHistory's replace.
This is a simple reproduction: https://github.com/yeonjuan/docusaurus-bug-repro

• src/components/Component.jsx

import { useHistory } from "@docusaurus/router"
import { useCallback, useEffect, useState } from "react";


export default function Component() {

  // bug
  const history = useHistory();
  useEffect(() => {
    history.replace({hash: "hash"});
  }, [])

  return <div>
    LazyLoaded
  </div>
}

• src/pages/index.js

<BrowserOnly fallback={<>fallback</>}>
        {() => {
          const Component = lazy(
            () =>
              import('../components/Component') 
          );
          return (
            <Suspense fallback={<div>loadder</div>}>
              <Component />
            </Suspense>
          );
        }}
</BrowserOnly>

When I add the code below at the parent of <BrowserOnly/>, it works well.

  // bug
  const history = useHistory();
  useEffect(() => {
    history.replace({hash: "hash"});
  }, [])

Reproducible demo

No response

Steps to reproduce

1. git clone https://github.com/yeonjuan/docusaurus-bug-repro.git
2. npm install
3. npm run dev
4. open browser and check console output

Expected behavior

Infinite rendering should not occur

Actual behavior

Infinite rendering

Your environment

• Public source code: https://github.com/yeonjuan/docusaurus-bug-repro
• Public site URL:
• Docusaurus version used: 3.1.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): v18.17.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 13.0

Self-service

• I'd be willing to fix this bug myself.

[yeonjuan]

it wasn't a bug in docusaurus. Thanks. (typescript-eslint/typescript-eslint#8736 (comment))