fix(core): apply named function pattern to useEffect calls (#347)

Author: eunwoo-levi

.changeset/pretty-candles-wink.md

@@ -0,0 +1,5 @@
+---
+'react-simplikit': patch
+---
+
+use named functions in useEffect callbacks for better stack traces

packages/core/src/hooks/useDebounce/useDebounce.ts

@@ -73,11 +73,14 @@ export function useDebounce<F extends (...args: any[]) => unknown>(
     return debounce<F>(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
 
-  useEffect(() => {
-    return () => {
-      debounced.cancel();
-    };
-  }, [debounced]);
+  useEffect(
+    function cancelDebouncedOnUnmount() {
+      return () => {
+        debounced.cancel();
+      };
+    },
+    [debounced]
+  );
 
   return debounced;
 }

packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.ts

@@ -42,7 +42,7 @@ export function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = useRef({ value: false, clearPreviousDebounce: () => {} });
 
-  useEffect(() => {
+  useEffect(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();

packages/core/src/hooks/useInterval/useInterval.ts

@@ -46,18 +46,24 @@ export function useInterval(callback: () => void, options: IntervalOptions) {
 
   const preservedCallback = usePreservedCallback(callback);
 
-  useEffect(() => {
-    if (immediate === true && enabled) {
-      preservedCallback();
-    }
-  }, [immediate, preservedCallback, enabled]);
+  useEffect(
+    function runImmediateCallback() {
+      if (immediate === true && enabled) {
+        preservedCallback();
+      }
+    },
+    [immediate, preservedCallback, enabled]
+  );
 
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
+  useEffect(
+    function startInterval() {
+      if (!enabled) {
+        return;
+      }
 
-    const id = setInterval(preservedCallback, delay);
-    return () => clearInterval(id);
-  }, [delay, preservedCallback, enabled]);
+      const id = setInterval(preservedCallback, delay);
+      return () => clearInterval(id);
+    },
+    [delay, preservedCallback, enabled]
+  );
 }

packages/core/src/hooks/useLoading/useLoading.ts

@@ -58,12 +58,15 @@ export function useLoading(): [boolean, <T>(promise: Promise<T>) => Promise<T>]
 function useIsMountedRef() {
   const ref = useRef({ isMounted: true }).current;
 
-  useEffect(() => {
-    ref.isMounted = true;
-    return () => {
-      ref.isMounted = false;
-    };
-  }, [ref]);
+  useEffect(
+    function trackMountedState() {
+      ref.isMounted = true;
+      return () => {
+        ref.isMounted = false;
+      };
+    },
+    [ref]
+  );
 
   return ref;
 }

packages/core/src/hooks/usePreservedCallback/usePreservedCallback.ts

@@ -32,9 +32,12 @@ export function usePreservedCallback<Arguments extends any[] = any[], ReturnValu
 ) {
   const callbackRef = useRef(callback);
 
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
 
   return useCallback((...args: Arguments) => {
     return callbackRef.current(...args);