fix: in strictMode render correct defaultValue (#452)

Author: heiyu4585

package.json

@@ -40,7 +40,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.5",
-    "rc-util": "^5.9.8"
+    "rc-util": "^5.23.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

src/InputNumber.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
+import { useLayoutUpdateEffect }  from "rc-util/lib/hooks/useLayoutEffect"
 import { composeRef } from 'rc-util/lib/ref';
 import getMiniDecimal, {
   DecimalClass,
@@ -18,7 +19,7 @@ import {
   validateNumber,
 } from './utils/numberUtil';
 import useCursor from './hooks/useCursor';
-import useUpdateEffect from './hooks/useUpdateEffect';
+
 import useFrame from './hooks/useFrame';
 
 /**
@@ -515,14 +516,14 @@ const InputNumber = React.forwardRef(
 
     // ========================== Controlled ==========================
     // Input by precision
-    useUpdateEffect(() => {
+    useLayoutUpdateEffect(() => {
       if (!decimalValue.isInvalidate()) {
         setInputValue(decimalValue, false);
       }
     }, [precision]);
 
     // Input by value
-    useUpdateEffect(() => {
+    useLayoutUpdateEffect(() => {
       const newValue = getMiniDecimal(value);
       setDecimalValue(newValue);
 
@@ -537,7 +538,7 @@ const InputNumber = React.forwardRef(
     }, [value]);
 
     // ============================ Cursor ============================
-    useUpdateEffect(() => {
+    useLayoutUpdateEffect(() => {
       if (formatter) {
         restoreCursor();
       }

src/hooks/useLayoutEffect.ts

@@ -135,3 +135,21 @@ describe('InputNumber.Formatter', () => {
     expect(input.value).toEqual('0');
   });
 });
+
+it('in strictMode render correct defaultValue ', () => {
+  const Demo = () => {
+    return (
+      <React.StrictMode>
+        <div>
+          <InputNumber defaultValue={5}  formatter={num => `$ ${num}`} />
+        </div>
+      </React.StrictMode>
+    );
+  };
+  const { container } = render(<Demo />);
+  const input = container.querySelector('input');
+  expect(input.value).toEqual('$ 5');
+
+  fireEvent.change(input, { target: { value: 3 } });
+  expect(input.value).toEqual('$ 3')
+});