Merge pull request #342 from notcodev/main

[fix]: useDidUpdate hook behavior with enabled strict mode

Author: debabin

packages/core/src/bundle/hooks/useDidUpdate/useDidUpdate.js

@@ -9,18 +9,21 @@ import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomo
  * @param {DependencyList} [deps] The dependencies list for the effect
  *
  * @example
- * useDidUpdate(() => console.log("effect runs on updates"), [deps]);
+ * useDidUpdate(() => console.log("effect runs on updates"), deps);
  */
 export const useDidUpdate = (effect, deps) => {
-  const initialRender = useRef(true);
+  const mounted = useRef(false);
+  useIsomorphicLayoutEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
   useIsomorphicLayoutEffect(() => {
-    if (initialRender.current) {
-      initialRender.current = false;
-      return;
-    }
-    const effectReturns = effect();
-    if (effectReturns && typeof effectReturns === 'function') {
-      return effectReturns;
+    if (mounted.current) {
+      return effect();
     }
+    mounted.current = true;
+    return undefined;
   }, deps);
 };

packages/core/src/hooks/useDidUpdate/useDidUpdate.test.ts

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import React from 'react';
 
 import { useDidUpdate } from './useDidUpdate';
 
@@ -35,3 +36,15 @@ it('Should call effect on rerender when dependencies empty', () => {
   rerender();
   expect(effect).toHaveBeenCalledTimes(2);
 });
+
+it('Should not call effect on initial render even in strict mode', () => {
+  const effect = vi.fn();
+  const { rerender } = renderHook(() => useDidUpdate(effect, []), {
+    wrapper: React.StrictMode
+  });
+
+  expect(effect).not.toHaveBeenCalled();
+
+  rerender();
+  expect(effect).not.toHaveBeenCalled();
+});

packages/core/src/hooks/useDidUpdate/useDidUpdate.ts

@@ -13,20 +13,24 @@ import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomo
  * @param {DependencyList} [deps] The dependencies list for the effect
  *
  * @example
- * useDidUpdate(() => console.log("effect runs on updates"), [deps]);
+ * useDidUpdate(() => console.log("effect runs on updates"), deps);
  */
 export const useDidUpdate = (effect: EffectCallback, deps?: DependencyList) => {
-  const initialRender = useRef(true);
+  const mounted = useRef(false);
+
+  useIsomorphicLayoutEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
 
   useIsomorphicLayoutEffect(() => {
-    if (initialRender.current) {
-      initialRender.current = false;
-      return;
+    if (mounted.current) {
+      return effect();
     }
 
-    const effectReturns = effect();
-    if (effectReturns && typeof effectReturns === 'function') {
-      return effectReturns;
-    }
+    mounted.current = true;
+    return undefined;
   }, deps);
 };

packages/core/src/hooks/useOnce/useOnce.test.ts

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import React from 'react';
 
 import { useOnce } from './useOnce';
 
@@ -9,6 +10,13 @@ it('Should use once', () => {
   expect(callback).toHaveBeenCalled();
 });
 
+it('Should use once even in strict mode', () => {
+  const callback = vi.fn();
+  renderHook(() => useOnce(callback), { wrapper: React.StrictMode });
+
+  expect(callback).toHaveBeenCalled();
+});
+
 it('Should not call callback after rerender', () => {
   const callback = vi.fn();
   const { rerender } = renderHook(() => useOnce(callback));