fix:(useAsyncIterState): state updates do nothing when rendered in react strict mode (#76)

Author: shtaif

spec/tests/useAsyncIterState.spec.tsx

@@ -1,14 +1,27 @@
-import { it, describe, expect, afterEach, vi } from 'vitest';
+import { it, describe, expect, afterEach, vi, beforeAll, afterAll } from 'vitest';
 import { gray } from 'colorette';
 import { range } from 'lodash-es';
-import { renderHook, cleanup as cleanupMountedReactTrees, act } from '@testing-library/react';
+import {
+  configure as configureReactTestingLib,
+  renderHook,
+  cleanup as cleanupMountedReactTrees,
+  act,
+} from '@testing-library/react';
 import { useAsyncIterState } from '../../src/index.js';
 import { asyncIterToArray } from '../utils/asyncIterToArray.js';
 import { asyncIterTake } from '../utils/asyncIterTake.js';
 import { asyncIterTakeFirst } from '../utils/asyncIterTakeFirst.js';
 import { checkPromiseState } from '../utils/checkPromiseState.js';
 import { pipe } from '../utils/pipe.js';
 
+beforeAll(() => {
+  configureReactTestingLib({ reactStrictMode: true });
+});
+
+afterAll(() => {
+  configureReactTestingLib({ reactStrictMode: false });
+});
+
 afterEach(() => {
   cleanupMountedReactTrees();
 });
@@ -165,7 +178,7 @@ describe('`useAsyncIterState` hook', () => {
       'Updating states iteratively with the returned setter *in the functional form* works correctly'
     ),
     async () => {
-      const renderFn = vi.fn<(prevState: number | undefined) => number>();
+      const valueUpdateInput = vi.fn<(prevState: number | undefined) => number>();
       const [values, setValue] = renderHook(() => useAsyncIterState<number>()).result.current;
 
       const rounds = 3;
@@ -175,12 +188,12 @@ describe('`useAsyncIterState` hook', () => {
 
       for (let i = 0; i < rounds; ++i) {
         await act(() => {
-          setValue(renderFn.mockImplementation(_prev => i));
+          setValue(valueUpdateInput.mockImplementation(_prev => i));
           currentValues.push(values.value.current);
         });
       }
 
-      expect(renderFn.mock.calls).toStrictEqual([[undefined], [0], [1]]);
+      expect(valueUpdateInput.mock.calls).toStrictEqual([[undefined], [0], [1]]);
       expect(currentValues).toStrictEqual([undefined, 0, 1, 2]);
       expect(await yieldsPromise).toStrictEqual([0, 1, 2]);
     }
@@ -191,7 +204,7 @@ describe('`useAsyncIterState` hook', () => {
       'Updating states as rapidly as possible with the returned setter *in the functional form* works correctly'
     ),
     async () => {
-      const renderFn = vi.fn<(prevState: number | undefined) => number>();
+      const valueUpdateInput = vi.fn<(prevState: number | undefined) => number>();
 
       const [values, setValue] = renderHook(() => useAsyncIterState<number>()).result.current;
 
@@ -200,11 +213,12 @@ describe('`useAsyncIterState` hook', () => {
       const currentValues = [values.value.current];
 
       for (let i = 0; i < 3; ++i) {
-        setValue(renderFn.mockImplementation(_prev => i));
+        setValue(valueUpdateInput.mockImplementation(_prev => i));
         currentValues.push(values.value.current);
+        // await undefined;
       }
 
-      expect(renderFn.mock.calls).toStrictEqual([[undefined], [0], [1]]);
+      expect(valueUpdateInput.mock.calls).toStrictEqual([[undefined], [0], [1]]);
       expect(currentValues).toStrictEqual([undefined, 0, 1, 2]);
       expect(await yieldPromise).toStrictEqual(2);
     }

src/common/hooks/useEffectStrictModeSafe.ts

@@ -0,0 +1,30 @@
+import { useRef, useEffect, type EffectCallback, type DependencyList } from 'react';
+
+export { useEffectStrictModeSafe };
+
+function useEffectStrictModeSafe(effect: EffectCallback, deps?: DependencyList): void {
+  const isPendingTeardownRef = useRef(false);
+
+  useEffect(() => {
+    const teardown = effect();
+
+    if (teardown) {
+      isPendingTeardownRef.current = false;
+
+      return () => {
+        if (isPendingTeardownRef.current) {
+          return;
+        }
+
+        isPendingTeardownRef.current = true;
+
+        (async () => {
+          await undefined;
+          if (isPendingTeardownRef.current) {
+            teardown();
+          }
+        })();
+      };
+    }
+  }, deps);
+}

src/common/hooks/useRefWithInitialValue.ts

@@ -3,16 +3,15 @@ import { useRef, type MutableRefObject } from 'react';
 export { useRefWithInitialValue };
 
 function useRefWithInitialValue<T = undefined>(initialValueFn: () => T): MutableRefObject<T> {
-  const isRefInitializedRef = useRef<boolean>();
-
+  const isInitializedRef = useRef<boolean>();
   const ref = useRef<T>();
 
-  if (!isRefInitializedRef.current) {
-    isRefInitializedRef.current = true;
+  if (!isInitializedRef.current) {
+    isInitializedRef.current = true;
     ref.current = initialValueFn();
   }
 
-  const refNonNull = ref as typeof ref & { current: T };
+  const refNonNullCurrent = ref as typeof ref & { current: T };
 
-  return refNonNull;
+  return refNonNullCurrent;
 }

src/useAsyncIterState/index.ts

@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
 import { callOrReturn } from '../common/callOrReturn.js';
 import { useRefWithInitialValue } from '../common/hooks/useRefWithInitialValue.js';
+import { useEffectStrictModeSafe } from '../common/hooks/useEffectStrictModeSafe.js';
 import { type MaybeFunction } from '../common/MaybeFunction.js';
 import { type Iterate } from '../Iterate/index.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import {
@@ -118,7 +118,7 @@ function useAsyncIterState<TVal, TInitVal>(
     channel: AsyncIterableChannel<TVal, TInitVal>;
     result: AsyncIterStateResult<TVal, TInitVal>;
   }>(() => {
-    const initialValueCalced = callOrReturn(initialValue) as TInitVal;
+    const initialValueCalced = callOrReturn(initialValue)!;
     const channel = new AsyncIterableChannel<TVal, TInitVal>(initialValueCalced);
     return {
       channel,
@@ -128,9 +128,9 @@ function useAsyncIterState<TVal, TInitVal>(
 
   const { channel, result } = ref.current;
 
-  useEffect(() => {
+  useEffectStrictModeSafe(() => {
     return () => channel.close();
-  }, []);
+  });
 
   return result;
 }