Open Creative-Ataraxia opened 1 year ago
can confirm this happening on vite + react
or you can put gui in a ref
or you can call gui.destroy()
in useEffect return (just make sure it doesn't trigger unless needed to)
anyway this looks more like react issue than library issue
It is normal behavior for useEffect with creation/subscription
To avoid bugs - always use return in useEffect
We need return some callback to unsubscribe, to destroy etc....
useEffect(() => {
const gui = new dat.GUI({ width: 400 })
gui.add(..etc..)
return ()=> gui.destroy()
}
I'm trying to use dat.gui with vite + react + tailwind + three.js:
but the gui is duplicated, showing another panel on the back:
and if I click on open, it will open two sets of controls like so:
one set of control do work as intended, the other set does not work at all;
I've tried to pass the
autoPlace: false
but then the gui won't show up at all anymoreany help is much appreciated
edit: also each time vite re-render's the page, a new set of gui is added to the viewport:
so it will become unusable like this:
![4](https://user-images.githubusercontent.com/102127487/191531879-3f3b6fde-04d8-4d1c-9933-6e9b93338d07.png)
do I have to unmount gui after each render somehow? btw, I'm putting all the three.js code in a
useEffect()
hook to be able to render it via react..edit2: so on a first glance this seeks to be an issue of gui.dat not dismounting and/or removing the last
<div>
created on the dom when vite rebuilds the build as I save code changes in the IDE; does dat.gui have a built-in API to remove the last created DOM element?