chore: cleanup custom hooks

Related to hto#444
bpmn-io · Jan 9, 2024 · 704b5b7 · 704b5b7
1 parent 85361a6
commit 704b5b7
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 15 deletions.
diff --git a/packages/form-js-editor/src/render/hooks/usePrevious.js b/packages/form-js-editor/src/render/hooks/usePrevious.js
@@ -4,10 +4,10 @@ import {
 } from 'preact/hooks';
 
 
-export default function usePrevious(value) {
-  const ref = useRef();
+export default function usePrevious(value, defaultValue = null) {
+  const ref = useRef(defaultValue);
 
-  useEffect(() => ref.current = value);
+  useEffect(() => ref.current = value, [ value ]);
 
   return ref.current;
 }
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Textarea.js b/packages/form-js-viewer/src/render/components/form-fields/Textarea.js
@@ -38,7 +38,7 @@ export default function Textarea(props) {
       field,
       value: target.value
     });
-  }, [ props.onChange ]);
+  });
 
   const onInputBlur = () => {
     flushOnChange && flushOnChange();

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Textfield.js b/packages/form-js-viewer/src/render/components/form-fields/Textfield.js
@@ -42,7 +42,7 @@ export default function Textfield(props) {
       field,
       value: target.value
     });
-  }, [ props.onChange ]);
+  });
 
   const onInputBlur = () => {
     flushOnChange && flushOnChange();

diff --git a/packages/form-js-viewer/src/render/hooks/useDeepCompareState.js b/packages/form-js-viewer/src/render/hooks/useDeepCompareState.js
@@ -17,7 +17,7 @@ export default function useDeepCompareState(value, defaultValue) {
 
   const [ state, setState ] = useState(defaultValue);
 
-  const previous = usePrevious(value, defaultValue, [ value ]);
+  const previous = usePrevious(value, defaultValue);
 
   const changed = !isEqual(previous, value);
 

diff --git a/packages/form-js-viewer/src/render/hooks/useFlushDebounce.js b/packages/form-js-viewer/src/render/hooks/useFlushDebounce.js
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'preact/hooks';
 import useService from './useService';
 
-function useFlushDebounce(func, additionalDeps = []) {
+function useFlushDebounce(func) {
 
   const timeoutRef = useRef(null);
   const lastArgsRef = useRef(null);
@@ -29,7 +29,7 @@ function useFlushDebounce(func, additionalDeps = []) {
       lastArgsRef.current = null;
     }, delay);
 
-  }, [ func, delay, shouldDebounce, ...additionalDeps ]);
+  }, [ func, delay, shouldDebounce ]);
 
   const flushFunc = useCallback(() => {
 
@@ -42,7 +42,7 @@ function useFlushDebounce(func, additionalDeps = []) {
       timeoutRef.current = null;
     }
 
-  }, [ func, ...additionalDeps ]);
+  }, [ func ]);
 
   return [ debounceFunc, flushFunc ];
 }

diff --git a/packages/form-js-viewer/src/render/hooks/usePrevious.js b/packages/form-js-viewer/src/render/hooks/usePrevious.js
@@ -4,10 +4,10 @@ import {
 } from 'preact/hooks';
 
 
-export default function usePrevious(value, defaultValue, dependencies) {
+export default function usePrevious(value, defaultValue = null) {
   const ref = useRef(defaultValue);
 
-  useEffect(() => ref.current = value, dependencies);
+  useEffect(() => ref.current = value, [ value ]);
 
   return ref.current;
 }
diff --git a/packages/form-js-viewer/test/helper/preactDebuggers.js b/packages/form-js-viewer/test/helper/preactDebuggers.js
@@ -4,11 +4,11 @@ const usePrevious = (value, initialValue) => {
   const ref = useRef(initialValue);
   useEffect(() => {
     ref.current = value;
-  });
+  }, [ value ]);
   return ref.current;
 };
 
-export function useEffectDebugger(effectHook, dependencies, dependencyNames = [], effectName = 'noname') {
+export function useEffectDebugger(effect, dependencies, dependencyNames = [], effectName = 'noname') {
   const previousDeps = usePrevious(dependencies, []);
 
   const changedDeps = dependencies.reduce((accum, dependency, index) => {
@@ -30,7 +30,7 @@ export function useEffectDebugger(effectHook, dependencies, dependencyNames = []
     console.log('[use-effect-debugger] (' + effectName + ') ', changedDeps);
   }
 
-  useEffect(effectHook, dependencies);
+  useEffect(effect, [ effect, ...dependencies ]);
 }
 
 export function useCallbackDebugger(callback, dependencies, dependencyNames = [], callbackName = 'noname') {
@@ -55,5 +55,5 @@ export function useCallbackDebugger(callback, dependencies, dependencyNames = []
     console.log('[use-callback-debugger] (' + callbackName + ') ', changedDeps);
   }
 
-  return useCallback(callback, dependencies);
+  return useCallback(callback, [ callback, ...dependencies ]);
 }