Repository navigation
bug: React IonRange gets into infinite render loop #21101
Description
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
Activity
jamiechong commentedon Apr 23, 2020
I believe the problem is here in
range.tsxWhen React renders the
IonRangecomponent, it sets the value from therangestate, which it's managing on its own. InsideIonRangethe new valueemits theionChangeevent, which eventually callssetRangeand causes the component to re-render, which updates thevalueprop ofIonRange, whichemits theionChangeevent again, which triggers thesetRangecall......Now that I understand the issue, I've worked around this by only calling
setRangeif the values have changed. It seems to break the loop. It might be worth considering a similar check before callingthis.ionChange.emit({ value });if the value, in fact, has not changed.nicolascepeda commentedon Oct 27, 2020
Any updates on this issue? Using ionic/react 5.4.1 the issue is still present and don't have any workaround.
jamesopstad commentedon Jul 6, 2021
This still seems to be an issue and it's quite a serious one. Are there any updates?
CameronCT commentedon Dec 6, 2021
Odd that this hasn't been fixed over a year later. The current work around is putting
return falseif the value matches your local state variable underonIonChange.Sunnyjson commentedon Jan 16, 2022
Has no one fixed this problem ？
sean-perkins commentedon Jul 6, 2022
Hello everyone, we have an open RFC that proposes a change to
ionChangethat would help alleviate this issue.Please take a moment to review and let us know your thoughts: #25532
sean-perkins commentedon Nov 9, 2022
Hello everyone, this issue is resolved as of: #26089 and will be available in the next major release (v7) of Ionic.
ionitron-bot commentedon Dec 9, 2022
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.