If you click on the DropDownMenu and do not select anything or select the same value it will run the onChange function despite no changes causing unnecessary dispatches/rerenders when using redux.
I tried to remedy the issue by preventing any actions if the value is the same as currently selected:
handleValueChange = val => {
if (this.state.selectedValue !== val) {
this.setState({ selectedValue: val })
}
}
<DropDownMenu
defaultValue={this.state.selectedValue}
values={this.state.values}
onChangeValue={this.handleValueChange}
/>
The problem with this approach is that while it does prevent unnecessary onChangeValue runs it locks the component in a valueless state when you toggle the component and click outside the options. Pitfall of not using <select>/<option />?
If you click on the
DropDownMenu
and do not select anything or select the same value it will run the onChange function despite no changes causing unnecessary dispatches/rerenders when using redux.I tried to remedy the issue by preventing any actions if the value is the same as currently selected:
The problem with this approach is that while it does prevent unnecessary
onChangeValue
runs it locks the component in a valueless state when you toggle the component and click outside the options. Pitfall of not using<select>
/<option />
?