feat: Add misc hooks

Author: zombieJ

src/hooks/useMemo.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface Cache<Value, Condition> {
+  condition?: Condition;
+  value?: Value;
+}
+
+export default function useMemo<Value, Condition = any[]>(
+  getValue: () => Value,
+  condition: Condition,
+  shouldUpdate: (prev: Condition, next: Condition) => boolean,
+) {
+  const cacheRef = React.useRef<Cache<Value, Condition>>({});
+
+  if (
+    !('value' in cacheRef.current) ||
+    shouldUpdate(cacheRef.current.condition, condition)
+  ) {
+    cacheRef.current.value = getValue();
+    cacheRef.current.condition = condition;
+  }
+
+  return cacheRef.current.value;
+}

src/hooks/useMergedState.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+export default function useControlledState<T, R = T>(
+  defaultStateValue: T | (() => T),
+  option?: {
+    defaultValue?: T | (() => T);
+    value?: T;
+    onChange?: (value: T, prevValue: T) => void;
+    postState?: (value: T) => T;
+  },
+): [R, (value: T) => void] {
+  const { defaultValue, value, onChange, postState } = option || {};
+  const [innerValue, setInnerValue] = React.useState<T>(() => {
+    if (value !== undefined) {
+      return value;
+    }
+    if (defaultValue !== undefined) {
+      return typeof defaultValue === 'function'
+        ? (defaultValue as any)()
+        : defaultValue;
+    }
+    return typeof defaultStateValue === 'function'
+      ? (defaultStateValue as any)()
+      : defaultStateValue;
+  });
+
+  let mergedValue = value !== undefined ? value : innerValue;
+  if (postState) {
+    mergedValue = postState(mergedValue);
+  }
+
+  function triggerChange(newValue: T) {
+    setInnerValue(newValue);
+    if (mergedValue !== newValue && onChange) {
+      onChange(newValue, mergedValue);
+    }
+  }
+
+  return [(mergedValue as unknown) as R, triggerChange];
+}

tests/hooks.test.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import useMemo from '../src/hooks/useMemo';
+
+describe('hooks', () => {
+  it('useMemo', () => {
+    const FC = ({ open, data }) => {
+      const memoData = useMemo(
+        () => data,
+        [open, data],
+        (prev, next) => next[0] && prev[1] !== next[1],
+      );
+      return <div memoData={memoData} />;
+    };
+
+    const wrapper = mount(<FC data="open" open />);
+    expect(wrapper.find('div').props().memoData).toEqual('open');
+
+    wrapper.setProps({ data: 'again' });
+    expect(wrapper.find('div').props().memoData).toEqual('again');
+
+    wrapper.setProps({ data: 'close', open: false });
+    expect(wrapper.find('div').props().memoData).toEqual('again');
+
+    wrapper.setProps({ data: 'repeat', open: true });
+    expect(wrapper.find('div').props().memoData).toEqual('repeat');
+  });
+});