fix: useMergedState should not action on mount effect of React 18 strict mode

src/hooks/useMergedState.ts

@@ -5,7 +5,7 @@ import useState from './useState';
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */
-export default function useControlledState<T, R = T>(
+export default function useMergedState<T, R = T>(
   defaultStateValue: T | (() => T),
   option?: {
     defaultValue?: T | (() => T);
@@ -49,16 +49,13 @@ export default function useControlledState<T, R = T>(
   );
 
   // Effect of reset value to `undefined`
-  const firstRenderRef = React.useRef(true);
+  const prevValueRef = React.useRef(value);
   React.useEffect(() => {
-    if (firstRenderRef.current) {
-      firstRenderRef.current = false;
-      return;
-    }
-
-    if (value === undefined) {
+    if (value === undefined && value !== prevValueRef.current) {
       setInnerValue(value);
     }
+
+    prevValueRef.current = value;
   }, [value]);
 
   return [mergedValue as unknown as R, triggerChange];

src/hooks/useState.ts

@@ -16,7 +16,7 @@ export type SetState<T> = (
  * We do not make this auto is to avoid real memory leak.
  * Developer should confirm it's safe to ignore themselves.
  */
-export default function useState<T>(
+export default function useSafeState<T>(
   defaultValue?: T | (() => T),
 ): [T, SetState<T>] {
   const destroyRef = React.useRef(false);

tests/hooks.test.js

@@ -76,6 +76,38 @@ describe('hooks', () => {
       const { container } = render(<Test />);
       expect(container.firstChild.textContent).toEqual('1');
     });
+
+    it('React 18 should not reset to undefined', () => {
+      const Demo = () => {
+        const [val] = useMergedState(33, { value: undefined });
+
+        return <div>{val}</div>;
+      };
+
+      const { container } = render(
+        <React.StrictMode>
+          <Demo />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('div').textContent).toEqual('33');
+    });
+
+    it('postState', () => {
+      const Demo = () => {
+        const [val] = useMergedState(1, { postState: v => v * 2 });
+
+        return <div>{val}</div>;
+      };
+
+      const { container } = render(
+        <React.StrictMode>
+          <Demo />
+        </React.StrictMode>,
+      );
+
+      expect(container.querySelector('div').textContent).toEqual('2');
+    });
   });
 
   describe('useLayoutEffect', () => {