Dat.Gui produces multiple GUI's on hot reload in ReactJS
To ensure that only one dat.gui is seen on hot reload, destroy the gui in the componentWillUnmount event within a useEffect hook.

Written by Oscar de la Hera Gomez
First published on 11/16/2023 at 16:22
Last Updated on 11/16/2023 at 20:41

To ensure that only one dat.gui is seen on hot reload, destroy the gui in the componentWillUnmount event within a useEffect hook.
SubscribeReact, ThreeJS & GLSL Resources
In order to prevent ReactJS from generating multiple, identical GUI's on hot reload, you must destroy the GUI in the componentWillUnmount event within a useEffect hook.
To learn how to do this consult the tutorial below.

Looking to learn more about ReactJS and ThreeJS ?
Search our blog to find educational content on learning how to use ReactJS and ThreeJS.
Search our BlogReact, ThreeJS & GLSL ResourcesAny Questions?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work