feat: Support usePropState

src/hooks/useControlledState.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import useLayoutEffect from './useLayoutEffect';
+
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+export default function useControlledState<T>(
+ defaultStateValue: T | (() => T),
+ value?: T,
+): [T, Updater<T>] {
+ const [innerValue, setInnerValue] = useState<T>(defaultStateValue);
+
+ const mergedValue = value !== undefined ? value : innerValue;
+
+ useLayoutEffect(
+ mount => {
+ if (!mount) {
+ setInnerValue(value);
+ }
+ },
+ [value],
+ );
+
+ return [
+ // Value
+ mergedValue,
+ // Update function
+ setInnerValue,
+ ];
+}

src/hooks/useMergedState.ts

@@ -13,6 +13,7 @@ function hasValue(value: any) {
 }
 
 /**
+ * @deprecated Please use `useControlledState` instead if not need support < React 18.
  * Similar to `useState` but will use props value if provided.
  * Note that internal use rc-util `useState` hook.
  */

tests/hooks.test.tsx

@@ -8,6 +8,7 @@ import useMergedState from '../src/hooks/useMergedState';
 import useMobile from '../src/hooks/useMobile';
 import useState from '../src/hooks/useState';
 import useSyncState from '../src/hooks/useSyncState';
+import useControlledState from '../src/hooks/useControlledState';
 
 global.disableUseId = false;
 
@@ -317,6 +318,163 @@ describe('hooks', () => {
  });
  });
 
+ describe('useControlledState', () => {
+ const FC: React.FC<{
+ value?: string;
+ defaultValue?: string | (() => string);
+ }> = props => {
+ const { value, defaultValue } = props;
+ const [val, setVal] = useControlledState<string>(
+ defaultValue ?? null,
+ value,
+ );
+ return (
+ <>
+ <input
+ value={val}
+ onChange={e => {
+ setVal(e.target.value);
+ }}
+ />
+ <span className="txt">{val}</span>
+ </>
+ );
+ };
+
+ it('still control of to undefined', () => {
+ const { container, rerender } = render(<FC value="test" />);
+
+ expect(container.querySelector('input').value).toEqual('test');
+ expect(container.querySelector('.txt').textContent).toEqual('test');
+
+ rerender(<FC value={undefined} />);
+ expect(container.querySelector('input').value).toEqual('test');
+ expect(container.querySelector('.txt').textContent).toEqual('');
+ });
+
+ describe('correct defaultValue', () => {
+ it('raw', () => {
+ const { container } = render(<FC defaultValue="test" />);
+
+ expect(container.querySelector('input').value).toEqual('test');
+ });
+
+ it('func', () => {
+ const { container } = render(<FC defaultValue={() => 'bamboo'} />);
+
+ expect(container.querySelector('input').value).toEqual('bamboo');
+ });
+ });
+
+ it('not rerender when setState as deps', () => {
+ let renderTimes = 0;
+
+ const Test = () => {
+ const [val, setVal] = useControlledState(0);
+
+ React.useEffect(() => {
+ renderTimes += 1;
+ expect(renderTimes < 10).toBeTruthy();
+
+ setVal(1);
+ }, [setVal]);
+
+ return <div>{val}</div>;
+ };
+
+ const { container } = render(<Test />);
+ expect(container.firstChild.textContent).toEqual('1');
+ });
+
+ it('React 18 should not reset to undefined', () => {
+ const Demo = () => {
+ const [val] = useControlledState(33, undefined);
+
+ return <div>{val}</div>;
+ };
+
+ const { container } = render(
+ <React.StrictMode>
+ <Demo />
+ </React.StrictMode>,
+ );
+
+ expect(container.querySelector('div').textContent).toEqual('33');
+ });
+
+ it('uncontrolled to controlled', () => {
+ const Demo: React.FC<Readonly<{ value?: number }>> = ({ value }) => {
+ const [mergedValue, setMergedValue] = useControlledState<number>(
+ () => 233,
+ value,
+ );
+
+ return (
+ <span
+ onClick={() => {
+ setMergedValue(v => v + 1);
+ setMergedValue(v => v + 1);
+ }}
+ onMouseEnter={() => {
+ setMergedValue(1);
+ }}
+ >
+ {mergedValue}
+ </span>
+ );
+ };
+
+ const { container, rerender } = render(<Demo />);
+ expect(container.textContent).toEqual('233');
+
+ // Update value
+ rerender(<Demo value={1} />);
+ expect(container.textContent).toEqual('1');
+
+ // Click update
+ rerender(<Demo value={undefined} />);
+ fireEvent.mouseEnter(container.querySelector('span'));
+ fireEvent.click(container.querySelector('span'));
+ expect(container.textContent).toEqual('3');
+ });
+
+ it('should alway use option value', () => {
+ const Test: React.FC<Readonly<{ value?: number }>> = ({ value }) => {
+ const [mergedValue, setMergedValue] = useControlledState<number>(
+ undefined,
+ value,
+ );
+ return (
+ <span
+ onClick={() => {
+ setMergedValue(12);
+ }}
+ >
+ {mergedValue}
+ </span>
+ );
+ };
+
+ const { container } = render(<Test value={1} />);
+ fireEvent.click(container.querySelector('span'));
+
+ expect(container.textContent).toBe('1');
+ });
+
+ it('render once', () => {
+ let count = 0;
+
+ const Demo: React.FC = () => {
+ const [] = useControlledState(undefined);
+ count += 1;
+ return null;
+ };
+
+ render(<Demo />);
+ expect(count).toBe(1);
+ });
+ });
+
  describe('useLayoutEffect', () => {
  const FC: React.FC<Readonly<{ defaultValue?: string }>> = props => {
  const { defaultValue } = props;