Fix controlled numberfield blur shows old value quickly (#2882)

Author: snowystinger

packages/@react-stately/numberfield/package.json

@@ -18,10 +18,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
+    "@internationalized/number": "^3.0.5",
+    "@react-aria/utils": "^3.11.2",
     "@react-stately/utils": "^3.4.1",
     "@react-types/numberfield": "^3.1.2",
-    "@react-types/shared": "^3.11.1",
-    "@internationalized/number": "^3.0.5"
+    "@react-types/shared": "^3.11.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1"

packages/@react-stately/numberfield/src/useNumberFieldState.ts

@@ -13,7 +13,8 @@
 import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
 import {NumberFieldProps} from '@react-types/numberfield';
 import {NumberFormatter, NumberParser} from '@internationalized/number';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useMemo, useRef, useState} from 'react';
+import {useLayoutEffect} from '@react-aria/utils';
 
 export interface NumberFieldState {
   /**
@@ -104,7 +105,7 @@ export function useNumberFieldState(
   // Update the input value when the number value or format options change. This is done
   // in a useEffect so that the controlled behavior is correct and we only update the
   // textfield after prop changes.
-  useEffect(() => {
+  useLayoutEffect(() => {
     setInputValue(format(numberValue));
   }, [numberValue, locale, formatOptions]);