One thing not mentioned often enough about SPAs is how complicated they make simple operations. In this component - https://gist.github.com/polydevuk/96d89642f114707b2f1a0cc316... - I have a select box for tzdata Regions (Europe, America etc.) and when a region is selected it populates a Locations menu beneath it (London, Paris etc.). Simple in jQuery or pure JS. In React, however, once a region and location has been chosen it caches some kind of hidden index value for the selected option such that a subsequent region choice
(without a page refresh) selects the item in the new Locations menu with the same hidden index value as the previous selection instead of the default header option. What was initially simple HTML + minimal JS becomes a complex attempt to manipulate React-specific magic. Using react-form? Fine .... until you need to mix it with react-select or material-ui then you're in for a world of pain deciding how to mix controlled and uncontrolled components. Add Redux into the mix and you're adding orders of magnitude more complexity. Frankly, I don't have the time. I would much rather be using that time to add features to my Rails back-end and spend time with my family. Back in the late 1990s and early 2000s CSS browser compatibility and DHTML was the big time-sink. Now it's SPAs. Back then we dreamt of a day when web standards were fully supported. Today that dream is a reality but you wouldn't know it because we've just made everything even more complex.
The only development which I can see saving us from this mess is Stimulus/Hotwire from the Rails team and implemented in other frameworks such as Djano, Laravel and Phoenix.
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.
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/96d89642f114707b2f1a0cc316...
> <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.
The only development which I can see saving us from this mess is Stimulus/Hotwire from the Rails team and implemented in other frameworks such as Djano, Laravel and Phoenix.