feat: add useLayoutEffect hook

src/hooks/useLayoutEffect.ts

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from 'react';
+import isBrowserClient from '../isBrowserClient';
+
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+export default function useLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList) {
+  // Never happen in test env
+  if (isBrowserClient) {
+    /* istanbul ignore next */
+    React.useLayoutEffect(effect, deps);
+  } else {
+    React.useEffect(effect, deps);
+  }
+}
+/* eslint-enable */

src/isBrowserClient.ts

@@ -0,0 +1,4 @@
+import canUseDom from './Dom/canUseDom';
+
+/** Is client side and not jsdom */
+export default process.env.NODE_ENV !== 'test' && canUseDom();

tests/hooks.test.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { mount } from 'enzyme';
 import useMemo from '../src/hooks/useMemo';
 import useMergedState from '../src/hooks/useMergedState';
+import useLayoutEffect from '../src/hooks/useLayoutEffect';
 
 describe('hooks', () => {
   it('useMemo', () => {
@@ -56,4 +57,36 @@ describe('hooks', () => {
       expect(wrapper.find('input').props().value).toEqual('test');
     });
   });
+
+  describe('useLayoutEffect', () => {
+    const FC = ({ defaultValue }) => {
+      const [val, setVal] = React.useState(defaultValue);
+      const [val2, setVal2] = React.useState();
+      useLayoutEffect(() => {
+        setVal2(`${val}a`);
+      }, [val]);
+      return (
+        <div>
+          <input
+            value={val}
+            onChange={e => {
+              setVal(e.target.value);
+            }}
+          />
+          <label>{val2}</label>
+        </div>
+      );
+    };
+
+    it('correct effect', () => {
+      const wrapper = mount(<FC defaultValue="test" />);
+      expect(wrapper.find('label').props().children).toEqual('testa');
+      wrapper.find('input').simulate('change', { target: { value: '1' } });
+      wrapper.update();
+      expect(wrapper.find('label').props().children).toEqual('1a');
+      wrapper.find('input').simulate('change', { target: { value: '2' } });
+      wrapper.update();
+      expect(wrapper.find('label').props().children).toEqual('2a');
+    });
+  });
 });