From 827146f00807493f07e4cb15975a65d5babf7d54 Mon Sep 17 00:00:00 2001
From: roku-ft <r.jokura@funtech.inc>
Date: 2025年3月17日 21:15:15 +0900
Subject: [PATCH] refactor useGUI to utilize useRef for GUI instance management
---
 utils/useGUI.ts &#124; 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)
diff --git a/utils/useGUI.ts b/utils/useGUI.ts
index 37c04b4d..f7556f5f 100644
--- a/utils/useGUI.ts
+++ b/utils/useGUI.ts
@@ -1,33 +1,37 @@
-import { useCallback, useEffect, useState, RefObject } from "react";
+import { useCallback, useEffect, RefObject, useRef } from "react";
 import GUI from "lil-gui";
 
-export const useGUI = (setupGUI: (gui: GUI) => void, title?: string, container?: RefObject<htmldivelement>) => {
- const [gui, setGUIState] = useState<gui &#124; null>(null);
+export const useGUI = (setupGUI: (gui: GUI) => void, title?: string, container?: RefObject<htmldivelement>) => { 
+ const guiRef = useRef<gui &#124; null>(null);
 
- useEffect(() => {
- if (!gui) {
+ useEffect(() => { 
+
+ if (!guiRef.current) {
 const newGui = new GUI({
 closeFolders: true,
 width: 240,
 title,
 autoPlace: container?.current ? false : true,
- container: container?.current &#124;&#124; undefined, 
+ container: container?.current &#124;&#124; undefined,
 });
- setGUIState(newGui);
+ guiRef.current = newGui;
 setupGUI(newGui);
 }
+ 
 return () => {
- if (gui) {
- gui?.destroy();
- setGUIState(null);
+ if (guiRef.current) {
+ guiRef.current.destroy();
+ guiRef.current = null;
 }
 };
- }, [gui, setupGUI, title, container]);
 
- const updateDisplays = useCallback(() => {
- gui?.folders.forEach((folder) =>
+ }, [setupGUI, title, container]);
+
+ const updateDisplays = useCallback(() => { 
+ guiRef.current?.folders.forEach((folder) =>
 folder.controllers.forEach((controller) => controller.updateDisplay())
- );
- }, [gui]);
+ ); 
+ }, []);
+ 
 return updateDisplays;
-};
+};
\ No newline at end of file
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/FunTechInc/use-shader-fx/pull/156.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/FunTechInc/use-shader-fx/pull/156.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>