getOptions call api again when onChange event is saving a value

[kevinlitardo]

When the onChange event is disabled, Select does not call the api when an option is chosen, however when onChange is used, Select call the api everytime an option is chosen, how this can be controlled to avoid those calls ?

https://codesandbox.io/s/select-search-3-test-forked-r24ef?file=/src/App.js:993-1006

[icaroscherma]

Hey @Ricqrdo this happens because once you have a state change in your current component, React redraws your current component.

In your example, App.js it's your component itself. So as you change the value of one state (setValue is set in onChange), you trigger a component change and it redraws. Then the <Select/> component goes to fetch the options again.

To avoid this you simply have to manually fetch your options and use an useEffect() to manage the search input.

[ejabu]

Hey @Ricqrdo this happens because once you have a state change in your current component, React redraws your current component.

In your example, App.js it's your component itself. So as you change the value of one state (setValue is set in onChange), you trigger a component change and it redraws. Then the <Select/> component goes to fetch the options again.

To avoid this you simply have to manually fetch your options and use an useEffect() to manage the search input.

is there any example to achive this ? or is there recommended way to get value from parent component ?

[arkzky]

Hey @Ricqrdo this happens because once you have a state change in your current component, React redraws your current component.

In your example, App.js it's your component itself. So as you change the value of one state (setValue is set in onChange), you trigger a component change and it redraws. Then the <Select/> component goes to fetch the options again.

To avoid this you simply have to manually fetch your options and use an useEffect() to manage the search input.

Your explanation is correct, but then what is the point on having the getOptions prop if is not compatible with the onChange event, which is the primary way to get the selected value from this component.

The live demo's doesn't even have this case tested, and should be one of the core ones!