- Allows you to use async/await and generators (useful for pagination/infinite scroll)
- You can test the view model independently of the rendering logic
- Dramatically reduces the code that lives directly in the component (it's only TSX)
- Allows for better abstractions and state management (services)
- Clear path to leveraging threads in front end applications
- Simple "visual" components (like <Input />, <Button />) don't need view models, just orchestrating components.
In practice, when writing traditional React, I focus too much on rendering cycles and the nuances of managing component state while spending much less time on making the application look good and feel performant/nice to use.
Having a component be pretty much exclusively TSX gives me a clear separation of "view" and "what the view needs" - so I just think of the html structure and css. I tend to create much better looking and nicer applications this way.
> It's way more skipping around in the codebase to find the parts you actually care about
Not really. You cnt+click to an implementation. Say you have "await someApi.getItems()" - you just click and go directly there. Traditional React apps need to thunk with redux or have a bunch of custom hooks that quickly become a source of confusion.