But that is exactly the issue with React imo.
In React needless complexity isn't hidden away, its front and center.
Frameworks like Svelte do a far better job hiding and managing actual complexity.
Svelte's interface is basically "I will re-execute top-level statements starting with $:".
Vue's interface is "I bound your data to html, feel free to update it, but beware of []-nuances".
React's interface is "You have to use state and effect wrappers, but don't effect in non-effect blocks (and read what an effect is!), also always make copies of everything, and we can run your code twice, and if you if (), then make sure you don't if () in an inappropriate place, anyway, imagine you're in a pure functional language, but you aren't really, so do that by hand and don't mess it up, we warned you".