Fix React Strictmode for sliders

packages/@react-aria/slider/src/useSlider.ts

@@ -14,7 +14,7 @@ import {AriaSliderProps} from '@react-types/slider';
 import {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
 import {getSliderThumbId, sliderIds} from './utils';
-import React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';
+import React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useEffect, useRef} from 'react';
 import {setInteractionModality, useMove} from '@react-aria/interactions';
 import {SliderState} from '@react-stately/slider';
 import {useLabel} from '@react-aria/label';
@@ -67,7 +67,9 @@ export function useSlider<T extends number | number[]>(
   const realTimeTrackDraggingIndex = useRef<number | null>(null);
 
   const stateRef = useRef<SliderState>(null);
-  stateRef.current = state;
+  useEffect(() => {
+    stateRef.current = state;
+  });
   const reverseX = direction === 'rtl';
   const currentPosition = useRef<number>(null);
   const {moveProps} = useMove({

packages/@react-aria/slider/src/useSliderThumb.ts

@@ -83,7 +83,9 @@ export function useSliderThumb(
   }, [isFocused, focusInput]);
 
   const stateRef = useRef<SliderState>(null);
-  stateRef.current = state;
+  useEffect(() => {
+    stateRef.current = state;
+  });
   let reverseX = direction === 'rtl';
   let currentPosition = useRef<number>(null);
 

packages/@react-spectrum/slider/test/RangeSlider.test.tsx

@@ -14,7 +14,7 @@ import {fireEvent, render} from '@react-spectrum/test-utils';
 import {press, testKeypresses} from './utils';
 import {Provider} from '@adobe/react-spectrum';
 import {RangeSlider} from '../';
-import React, {useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
@@ -126,11 +126,14 @@ describe('RangeSlider', function () {
   });
 
   it('can be controlled', function () {
-    let renders = [];
+    let setValues = [];
 
     function Test() {
-      let [value, setValue] = useState({start: 20, end: 40});
-      renders.push(value);
+      let [value, _setValue] = useState({start: 20, end: 40});
+      let setValue = useCallback((val) => {
+        setValues.push(val);
+        _setValue(val);
+      }, [_setValue]);
 
       return (<RangeSlider label="The Label" value={value} onChange={setValue} />);
     }
@@ -154,7 +157,7 @@ describe('RangeSlider', function () {
     expect(sliderRight).toHaveAttribute('aria-valuetext', '50');
     expect(output).toHaveTextContent('30 – 50');
 
-    expect(renders).toStrictEqual([{start: 20, end: 40}, {start: 30, end: 40}, {start: 30, end: 50}]);
+    expect(setValues).toStrictEqual([{start: 30, end: 40}, {start: 30, end: 50}]);
   });
 
   it('supports a custom valueLabel', function () {

packages/@react-spectrum/slider/test/Slider.test.tsx

@@ -13,7 +13,7 @@
 import {act, fireEvent, installMouseEvent, render} from '@react-spectrum/test-utils';
 import {press, testKeypresses} from './utils';
 import {Provider} from '@adobe/react-spectrum';
-import React, {useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {Slider} from '../';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
@@ -119,11 +119,14 @@ describe('Slider', function () {
   });
 
   it('can be controlled', function () {
-    let renders = [];
+    let setValues = [];
 
     function Test() {
-      let [value, setValue] = useState(50);
-      renders.push(value);
+      let [value, _setValue] = useState(50);
+      let setValue = useCallback((val) => {
+        setValues.push(val);
+        _setValue(val);
+      }, [_setValue]);
 
       return (<Slider label="The Label" value={value} onChange={setValue} />);
     }
@@ -141,7 +144,7 @@ describe('Slider', function () {
     expect(slider).toHaveAttribute('aria-valuetext', '55');
     expect(output).toHaveTextContent('55');
 
-    expect(renders).toStrictEqual([50, 55]);
+    expect(setValues).toStrictEqual([55]);
   });
 
   it('supports a custom getValueLabel', function () {

packages/@react-stately/slider/src/useSliderState.ts

@@ -14,7 +14,7 @@ import {clamp, snapValueToStep} from '@react-aria/utils';
 import {Orientation} from '@react-types/shared';
 import {SliderProps} from '@react-types/slider';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface SliderState {
   /**
@@ -192,9 +192,11 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
   const [focusedIndex, setFocusedIndex] = useState<number | undefined>(undefined);
 
   const valuesRef = useRef<number[]>(null);
-  valuesRef.current = values;
   const isDraggingsRef = useRef<boolean[]>(null);
-  isDraggingsRef.current = isDraggings;
+  useEffect(() => {
+    valuesRef.current = values;
+    isDraggingsRef.current = isDraggings;
+  });
 
   function getValuePercent(value: number) {
     return (value - minValue) / (maxValue - minValue);

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

@@ -10,46 +10,49 @@
  * governing permissions and limitations under the License.
  */
 
-import {useCallback, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 
 export function useControlledState<T>(
   value: T,
   defaultValue: T,
   onChange: (value: T, ...args: any[]) => void
 ): [T, (value: T, ...args: any[]) => void]  {
   let [stateValue, setStateValue] = useState(value || defaultValue);
-  let ref = useRef(value !== undefined);
-  let wasControlled = ref.current;
   let isControlled = value !== undefined;
   // Internal state reference for useCallback
   let stateRef = useRef(stateValue);
-  if (wasControlled !== isControlled) {
-    console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
-  }
 
-  ref.current = isControlled;
+  // detect if a component is switching from controlled to uncontrolled or vice versa, warn if so
+  let isControlledRef = useRef(isControlled);
+  useEffect(() => {
+    let wasControlled = isControlledRef.current;
+    if (isControlled !== wasControlled) {
+      console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
+    }
+    isControlledRef.current = isControlled;
+  }, [value, isControlled]);
 
-  let setValue = useCallback((value, ...args) => {
-    let onChangeCaller = (value, ...onChangeArgs) => {
+  let setValue = useCallback((newValue, ...args) => {
+    let onChangeCaller = (updateValue, ...onChangeArgs) => {
       if (onChange) {
-        if (!Object.is(stateRef.current, value)) {
-          onChange(value, ...onChangeArgs);
+        if (!Object.is(stateRef.current, updateValue)) {
+          onChange(updateValue, ...onChangeArgs);
         }
       }
       if (!isControlled) {
-        stateRef.current = value;
+        stateRef.current = updateValue;
       }
     };
 
-    if (typeof value === 'function') {
+    if (typeof newValue === 'function') {
       console.warn('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');
       // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates
       // when someone using useControlledState calls setControlledState(myFunc)
       // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc
       // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning
       // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same
       let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value(isControlled ? stateRef.current : oldValue, ...functionArgs);
+        let interceptedValue = newValue(isControlled ? stateRef.current : oldValue, ...functionArgs);
         onChangeCaller(interceptedValue, ...args);
         if (!isControlled) {
           return interceptedValue;
@@ -59,16 +62,19 @@ export function useControlledState<T>(
       setStateValue(updateFunction);
     } else {
       if (!isControlled) {
-        setStateValue(value);
+        setStateValue(newValue);
       }
-      onChangeCaller(value, ...args);
+      onChangeCaller(newValue, ...args);
     }
   }, [isControlled, onChange]);
 
-  // If a controlled component's value prop changes, we need to update stateRef
-  if (isControlled) {
-    stateRef.current = value;
-  } else {
+  useEffect(() => {
+    // If a controlled component's value prop changes, we need to update stateRef
+    if (isControlled) {
+      stateRef.current = value;
+    }
+  });
+  if (!isControlled) {
     value = stateValue;
   }
 

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

@@ -99,12 +99,16 @@ describe('useControlledState tests', function () {
     let {getByRole, getByTestId} = render(<TestComponentWrapper defaultValue={5} />);
     let button = getByRole('button');
     getByTestId('5');
-    expect(renderSpy).toBeCalledTimes(1);
+    if (!process.env.STRICT_MODE) {
+      expect(renderSpy).toBeCalledTimes(1);
+    }
     actDOM(() =>
       userEvent.click(button)
     );
     getByTestId('6');
-    expect(renderSpy).toBeCalledTimes(2);
+    if (!process.env.STRICT_MODE) {
+      expect(renderSpy).toBeCalledTimes(2);
+    }
   });
 
   it('can handle controlled setValue behavior', () => {