Fix: 「クリア」が正常に動作するように

Author: su-u

package.json

@@ -35,6 +35,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-json-view": "^1.21.3",
+    "react-use": "^17.5.1",
     "rsuite": "^5.70.0",
     "timezones-list": "^3.0.3",
     "uuid": "^10.0.0"

src/components/common/Form/ClearButton.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const ClearButton: FC<Props> = ({ name, title = 'クリア', onClick = null }) => {
-  const { resetField, watch, setValue } = useFormContext();
+  const { resetField } = useFormContext();
 
   const onClickInputClear = useCallback(() => {
     resetField(name);

src/hooks/useFormPersistence.ts

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
+import { useEffectOnce } from 'react-use';
 
 // フォームの情報をlocalStorageに保存して永続化する
 export const useFormPersistence = <T>(
@@ -13,17 +14,26 @@ export const useFormPersistence = <T>(
     formState: { isDirty },
   } = methods;
   const formData = watch();
+  const [isDefault, setIsDefault] = useState(true);
 
   useEffect(() => {
-    const defaultValues = JSON.parse(localStorage.getItem(name));
-    if (!isDirty) {
-      setCallback(defaultValues);
+    try {
+      const defaultValues = JSON.parse(localStorage.getItem(name));
+      if (!isDirty && isDefault) {
+        setCallback(defaultValues);
+        // console.log('get', { name, defaultValues });
+        setIsDefault(false);
+      }
+    } catch (e) {
+      console.error(e);
     }
-  }, [isDirty]);
+  }, [isDirty, isDefault]);
 
   useEffect(() => {
-    if (isDirty) {
+    // console.log('set1', { name, isDirty, isDefault, formData });
+    if (isDirty || (!isDirty && !isDefault)) {
       localStorage.setItem(name, JSON.stringify(formData));
+      // console.log('set2', { name, isDirty, isDefault, formData });
     }
-  }, [formData, isDirty]);
+  }, [formData, isDirty, isDefault]);
 };