- Fix for prop update not working on StrictMode. Fixed #757

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "main": "dist/react-number-format.cjs.js",
   "module": "dist/react-number-format.es.js",
   "types": "types/index.d.ts",
@@ -90,8 +90,8 @@
     "material-ui": "^0.20.2",
     "pascal-case": "3.1.2",
     "prettier": "^2.2.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-transform-hmr": "^1.0.4",
     "rollup": "^1.22.0",
     "rollup-plugin-babel": "^4.3.3",

src/utils.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { NumberFormatBaseProps, FormatInputValueFunction, OnValueChange } from './types';
 
 // basic noop function
@@ -457,7 +457,6 @@ export function useInternalValues(
   const [values, setValues] = useState<Values>(() => {
     return getValues(isNil(value) ? defaultValue : value, valueIsNumericString);
   });
-  const lastPropBasedValue = useRef<Values>(values);
 
   const _onValueChange: typeof onValueChange = (newValues, sourceInfo) => {
     if (newValues.formattedValue !== values.formattedValue) {
@@ -481,10 +480,9 @@ export function useInternalValues(
 
   const newValues = getValues(_value, _valueIsNumericString);
 
-  if (newValues.formattedValue !== lastPropBasedValue.current.formattedValue) {
-    lastPropBasedValue.current = newValues;
+  useMemo(() => {
     setValues(newValues);
-  }
+  }, [newValues.formattedValue]);
 
   return [values, _onValueChange];
 }

test/library/input.spec.js

@@ -1,5 +1,6 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo, StrictMode } from 'react';
 import { renderHook } from '@testing-library/react-hooks/dom';
+import { fireEvent } from '@testing-library/react';
 
 import TextField from 'material-ui/TextField';
 
@@ -624,6 +625,38 @@ describe('NumberFormat as input', () => {
     expect(input.value).toEqual('Rs. 1,234');
   });
 
+  it('should handle prop updates on StrictMode', async () => {
+    function Test() {
+      const [val, setVal] = React.useState('2');
+
+      return (
+        <div className="App">
+          <span>Controlled value: {val}</span>
+          <hr />
+          <NumericFormat
+            value={val}
+            onValueChange={(values) => {
+              setVal(values.value);
+            }}
+          />
+          <button type="button" onClick={() => setVal('321')}>
+            Update to 321
+          </button>
+        </div>
+      );
+    }
+
+    const { input, view } = await render(
+      <StrictMode>
+        <Test />
+      </StrictMode>,
+    );
+    expect(input.value).toEqual('2');
+    const button = view.getByRole('button');
+    fireEvent.click(button);
+    expect(input.value).toEqual('321');
+  });
+
   describe('Test masking', () => {
     it('should allow mask as string', () => {
       const wrapper = mount(<PatternFormat format="#### #### ####" mask="_" />);

yarn.lock

@@ -8095,7 +8095,7 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@^18.0.0:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -8277,7 +8277,7 @@ react-transition-group@^1.2.1:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react@^18.0.0:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==