> <select {...register('region2')} onChange={ e => setRegion2(e.target.value) }>
This is what I meant in my earlier comment: Each change will now cause a re-rendering of the entire component. I think it would be better to split up the code here and move the <select> tags into a separate component with separate state. This component would then only tell your parent component about a state change once both region1 and zone1 have been set.
Great advice. Thanks. Somehow I think it proves my point, though - that SPA frameworks lead to endless complexity making the whole front-end industry the province of senior developers.
If you allow me a few comments on the code:
> .then(res => { setYou(res[form.name1].planets) ; setOther(res[form.name2].planets) })
setYou, setOther will usually each trigger a re-rendering. It would be better to store them together if they're always changed together.
> .then(res => document.getElementById('results').style.visibility = 'visible')
You might want to look into `useRef()` here.
> <select {...register('region2')} onChange={ e => setRegion2(e.target.value) }>
This is what I meant in my earlier comment: Each change will now cause a re-rendering of the entire component. I think it would be better to split up the code here and move the <select> tags into a separate component with separate state. This component would then only tell your parent component about a state change once both region1 and zone1 have been set.