fix: initial state was reset in single subscription hooks in strict mode in dev

With strict mode in development, each component is mounted, unmounted and remounted.
Previously, `initialState` was set to `undefined` after the first mount because a change in the passed reference was assumed.

Author: andipaetzold

src/internal/useListen.spec.ts

@@ -1,8 +1,8 @@
-import { act, renderHook } from "@testing-library/react";
+import { act, configure, renderHook } from "@testing-library/react";
 import { newSymbol } from "../__testfixtures__/index.js";
 import { useListen } from "./useListen.js";
 import { LoadingState } from "./useLoadingValue.js";
-import { it, expect, beforeEach, describe, vi } from "vitest";
+import { it, expect, beforeEach, describe, vi, afterEach } from "vitest";
 
 const result1 = newSymbol("Result 1");
 const result2 = newSymbol("Result 2");
@@ -25,21 +25,37 @@ beforeEach(() => {
     onChange.mockReturnValue(onChangeUnsubscribe);
 });
 
-describe("initial state", () => {
-    // reference, initialState, expectedValue, expectedLoading
-    it.each([
-        [undefined, result1, undefined, false],
-        [undefined, undefined, undefined, false],
-        [undefined, LoadingState, undefined, false],
-        [refA1, result1, result1, false],
-        [refA1, undefined, undefined, false],
-        [refA1, LoadingState, undefined, true],
-    ])("reference=%s initialState=%s", (reference, initialState, expectedValue, expectedLoading) => {
-        const { result } = renderHook(() => useListen(reference, onChange, isEqual, initialState));
-        expect(result.current).toStrictEqual([expectedValue, expectedLoading, undefined]);
-    });
+afterEach(() => {
+    configure({ reactStrictMode: false });
 });
 
+describe.each([{ reactStrictMode: true }, { reactStrictMode: false }])(
+    `strictMode=$reactStrictMode`,
+    ({ reactStrictMode }) => {
+        beforeEach(() => {
+            configure({ reactStrictMode });
+        });
+
+        describe("initial state", () => {
+            it.each`
+                reference    | initialState    | expectedValue | expectedLoading
+                ${undefined} | ${result1}      | ${undefined}  | ${false}
+                ${undefined} | ${undefined}    | ${undefined}  | ${false}
+                ${undefined} | ${LoadingState} | ${undefined}  | ${false}
+                ${refA1}     | ${result1}      | ${result1}    | ${false}
+                ${refA1}     | ${undefined}    | ${undefined}  | ${false}
+                ${refA1}     | ${LoadingState} | ${undefined}  | ${true}
+            `(
+                "reference=$reference initialState=$initialState",
+                ({ reference, initialState, expectedValue, expectedLoading }) => {
+                    const { result } = renderHook(() => useListen(reference, onChange, isEqual, initialState));
+                    expect(result.current).toStrictEqual([expectedValue, expectedLoading, undefined]);
+                },
+            );
+        });
+    },
+);
+
 describe("when changing ref", () => {
     it("should not resubscribe for equal ref", async () => {
         // first ref

src/internal/useListen.ts

@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 import { ValueHookResult } from "../common/index.js";
 import { useLoadingValue, LoadingState } from "./useLoadingValue.js";
 import { useStableValue } from "./useStableValue.js";
+import { usePrevious } from "./usePrevious.js";
 
 /**
  * @internal
@@ -26,30 +27,29 @@ export function useListen<Value, Error, Reference>(
     );
 
     const stableRef = useStableValue(reference ?? undefined, isEqual);
-    const firstRender = useRef<boolean>(true);
+    const previousRef = usePrevious(stableRef);
 
+    // set state when ref changes
     useEffect(() => {
+        if (stableRef === previousRef) {
+            return;
+        }
+
         if (stableRef === undefined) {
-            // value doesn't change on first render with undefined ref
-            if (firstRender.current) {
-                firstRender.current = false;
-            } else {
-                setValue();
-            }
+            setValue();
         } else {
-            // do not set loading state on first render
-            // otherwise, the defaultValue gets overwritten
-            if (firstRender.current) {
-                firstRender.current = false;
-            } else {
-                setLoading();
-            }
+            setLoading();
+        }
+    }, [previousRef, setLoading, setValue, stableRef]);
 
-            const unsubscribe = onChange(stableRef, setValue, setError);
-            return () => unsubscribe();
+    // subscribe to changes
+    useEffect(() => {
+        if (stableRef === undefined) {
+            return;
         }
-        return undefined;
-    }, [stableRef, onChange, setError, setLoading, setValue]);
+        const unsubscribe = onChange(stableRef, setValue, setError);
+        return () => unsubscribe();
+    }, [onChange, setError, setValue, stableRef]);
 
     return useMemo(() => [value, loading, error], [value, loading, error]);
 }

src/internal/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export function usePrevious<T>(value: T) {
+    const ref = useRef<T>(value);
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}