bug: React IonRange gets into infinite render loop

Bug Report

Ionic version:

[x] 5.0.7

Current behavior: I’m using the IonRange component with dualKnobs. When trying to set a default value and update state with onIonChange the parent component gets into an infinite render loop as soon as I update the range state.

Expected behavior: I should be able set the default value of the lower and upper knobs by setting the value prop of IonRange. This works, but as soon slide one of the knobs, the parent component repeatedly re-renders forever.

Steps to reproduce: Create a component with that renders an IonRange component and also useState. You can see an example here: https://stackblitz.com/edit/ionic-react-demo-tt4ytk?file=pages%2FHome.jsx

As soon as you adjust one of the knobs (and onIonChange is called), you will see that the component is rendered in a loop - console.log('render') is called repeatedly forever.

Related code:

const MyComponent = () => {
  const defaultValue = {lower: 40, upper: 70};
  const [range, setRange] = useState(defaultValue);
  
  console.log('render');

  return (
    <IonRange dualKnobs={true} min={0} max={100} value={{...defaultValue}} onIonChange={ e => setRange(e.detail.value) }>
      <IonLabel slot="start">{range.lower}</IonLabel>
      <IonLabel slot="end">{range.upper}</IonLabel>
    </IonRange>        
  );
};

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.6.0 
   Ionic Framework : @ionic/react 5.0.7

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 
   npm    : 6.13.4
   OS     : macOS Catalina

[jamesopstad]

This still seems to be an issue and it’s quite a serious one. Are there any updates?

[CameronCT]

Odd that this hasn’t been fixed over a year later. The current work around is putting return false if the value matches your local state variable under onIonChange.