Prevent extra onChanges from useControlledState (#1480)

NaN !== NaN, but we can compare them using Object.is https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Author: snowystinger

packages/@react-stately/utils/src/useControlledState.ts

@@ -32,7 +32,7 @@ export function useControlledState<T>(
   let setValue = useCallback((value, ...args) => {
     let onChangeCaller = (value, ...onChangeArgs) => {
       if (onChange) {
-        if (stateRef.current !== value) {
+        if (!Object.is(stateRef.current, value)) {
           onChange(value, ...onChangeArgs);
         }
       }

packages/@react-stately/utils/test/useControlledState.test.js

@@ -48,6 +48,24 @@ describe('useControlledState tests', function () {
     expect(onChangeSpy).toHaveBeenLastCalledWith('newValue');
   });
 
+  it('using NaN will only trigger onChange once', () => {
+    let onChangeSpy = jest.fn();
+    let {result} = renderHook(() => useControlledState(undefined, undefined, onChangeSpy));
+    let [value, setValue] = result.current;
+    expect(value).not.toBeDefined();
+    expect(onChangeSpy).not.toHaveBeenCalled();
+    act(() => setValue(NaN));
+    [value, setValue] = result.current;
+    expect(value).toBe(NaN);
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    expect(onChangeSpy).toHaveBeenLastCalledWith(NaN);
+
+    act(() => setValue(NaN));
+    [value, setValue] = result.current;
+    expect(value).toBe(NaN);
+    expect(onChangeSpy).toHaveBeenCalledTimes(1);
+  });
+
   it('can handle callback setValue behavior', () => {
     let onChangeSpy = jest.fn();
     let {result} = renderHook(() => useControlledState(undefined, 'defaultValue', onChangeSpy));