'Hydration mismatch' errors after stop token implementation

[cmdcolin]

Git bisect traces it to stop token introduction

1cccc8773bb5af098e3a8e3873e63d0d463e8621 is the first bad commit
commit 1cccc8773bb5af098e3a8e3873e63d0d463e8621
Author: Colin Diesh <[email protected]>
Date:   Mon Nov 18 19:45:57 2024 -0500

    Replace AbortSignal with "stop token" to rescue some aborting behavior (#4663)

can see it in dev mode (it's a dev mode only error, but indicates something you should try to avoid in production) on initial load of SV inspector or changing width of the circular panel http://localhost:3000/?config=test_data%2Fvolvox%2Fconfig.json&session=share-nJeMwquiS1&password=boLu2

[cmdcolin]

note: this error isn't in any published jbrowse version, since it was added after last release

[cmdcolin]

also can produce error "Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node"

[cmdcolin]

re-opening. it does still occur, and the new react 19 provides a better "hydration mismatch" regarding this

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  <ThemeProvider theme={{...}}>
    <ThemeProviderNoVars theme={{...}}>
      <ThemeProvider themeId={undefined} theme={{...}}>
        <ThemeProvider theme={{...}}>
          <RtlProvider value={false}>
            <DefaultPropsProvider value={{...}}>
+             <div
+               ref={{current:null}}
+               data-testid="wiggle-rendering-test"
+               onMouseMove={function onMouseMove}
+               onClick={function onClick}
+               onMouseLeave={function onMouseLeave}
+               style={{overflow:"visible",position:"relative",height:45}}
+             >
    throwOnHydrationMismatch http://localhost:3000/static/js/bundle.js:15025
    beginWork http://localhost:3000/static/js/bundle.js:20826
    runWithFiberInDEV http://localhost:3000/static/js/bundle.js:11440
    performUnitOfWork http://localhost:3000/static/js/bundle.js:25941
    workLoopSync http://localhost:3000/static/js/bundle.js:25767
    renderRootSync http://localhost:3000/static/js/bundle.js:25747
    performWorkOnRoot http://localhost:3000/static/js/bundle.js:25231
    performWorkOnRootViaSchedulerTask http://localhost:3000/static/js/bundle.js:26828
    performWorkUntilDeadline http://localhost:3000/static/js/bundle.js:39316
[bundle.js:15025:11](http://localhost:3000/static/js/bundle.js)

​```