3 ms·

It took me a while to understand your React example (or at least I hope I get it now). But I don't know… I agree that React has some pitfalls and lots of people

It took me a while to understand your React example (or at least I hope I get it now). But I don't know… I agree that React has some pitfalls and lots of people don't get it right (especially forms!) but there are ways (clean ways, in fact) to solve this. It's not React's fault, though. Handling complicated state has always been hard and it's not exactly easier in jQuery or pure JS.

cutler 6y ago
But in this case, which isn't atypical, it WAS easier in jQuery. Much easier. I had it working fine with jQuery but wanted to see if I could make it work with React. Here's the full component: https://gist.github.com/polydevuk/96d89642f114707b2f1a0cc3161339b7 https://gist.github.com/polydevuk/96d89642f114707b2f1a0cc316...
- codethief 6y ago
  That doesn't look bad to me, though. Pretty much 90% of the code is just HTML, anyway, and I doubt it would be much shorter in jQuery. 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.
  - cutler 6y ago
    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.

cutler 6y ago

But in this case, which isn't atypical, it WAS easier in jQuery. Much easier. I had it working fine with jQuery but wanted to see if I could make it work with React. Here's the full component: https://gist.github.com/polydevuk/96d89642f114707b2f1a0cc3161339b7 https://gist.github.com/polydevuk/96d89642f114707b2f1a0cc316...

codethief 6y ago
That doesn't look bad to me, though. Pretty much 90% of the code is just HTML, anyway, and I doubt it would be much shorter in jQuery. 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.
- cutler 6y ago
  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.