diff --git a/.changeset/pretty-candles-wink.md b/.changeset/pretty-candles-wink.md new file mode 100644 index 00000000..87467ff6 --- /dev/null +++ b/.changeset/pretty-candles-wink.md @@ -0,0 +1,5 @@ +--- +'react-simplikit': patch +--- + +use named functions in useEffect callbacks for better stack traces diff --git a/packages/core/src/hooks/useDebounce/useDebounce.ts b/packages/core/src/hooks/useDebounce/useDebounce.ts index 4cc9c101..128005b2 100644 --- a/packages/core/src/hooks/useDebounce/useDebounce.ts +++ b/packages/core/src/hooks/useDebounce/useDebounce.ts @@ -73,11 +73,14 @@ export function useDebounce unknown>( return debounce(preservedCallback, wait, { edges }); }, [preservedCallback, wait, edges]); - useEffect(() => { - return () => { - debounced.cancel(); - }; - }, [debounced]); + useEffect( + function cancelDebouncedOnUnmount() { + return () => { + debounced.cancel(); + }; + }, + [debounced] + ); return debounced; } diff --git a/packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.ts b/packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.ts index 1ffa16b8..6ffce00d 100644 --- a/packages/core/src/hooks/useDebouncedCallback/useDebouncedCallback.ts +++ b/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(); diff --git a/packages/core/src/hooks/useInterval/useInterval.ts b/packages/core/src/hooks/useInterval/useInterval.ts index 996dbaf0..ac950307 100644 --- a/packages/core/src/hooks/useInterval/useInterval.ts +++ b/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 = window.setInterval(preservedCallback, delay); - return () => window.clearInterval(id); - }, [delay, preservedCallback, enabled]); + const id = window.setInterval(preservedCallback, delay); + return () => window.clearInterval(id); + }, + [delay, preservedCallback, enabled] + ); } diff --git a/packages/core/src/hooks/useLoading/useLoading.ts b/packages/core/src/hooks/useLoading/useLoading.ts index eb877bf7..8c09029f 100644 --- a/packages/core/src/hooks/useLoading/useLoading.ts +++ b/packages/core/src/hooks/useLoading/useLoading.ts @@ -58,12 +58,15 @@ export function useLoading(): [boolean, (promise: Promise) => Promise] 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; } diff --git a/packages/core/src/hooks/usePreservedCallback/usePreservedCallback.ts b/packages/core/src/hooks/usePreservedCallback/usePreservedCallback.ts index 7ed03200..4cd2190d 100644 --- a/packages/core/src/hooks/usePreservedCallback/usePreservedCallback.ts +++ b/packages/core/src/hooks/usePreservedCallback/usePreservedCallback.ts @@ -32,9 +32,12 @@ export function usePreservedCallback { - callbackRef.current = callback; - }, [callback]); + useEffect( + function syncCallbackRef() { + callbackRef.current = callback; + }, + [callback] + ); return useCallback((...args: Arguments) => { return callbackRef.current(...args);