How to Decompose a Frontend

Of course, the first thing I do is create a hierarchy of components based on the logic of the UI. But beyond that, I have my own principles for further decomposition. Here they are:

1. Every single feature can be a separate component.
2. Every page in an SPA should be a separate component.
3. If I feel that a part of the UI is reusable across features and components, I make it a separate component.
4. If I’ve created a component that is large (more than 150 lines of code), and I can logically extract part of its state, I split it into a separate component.
5.  Every component should have its own state, logically isolated from other parts of the system. If I struggle to achieve this, then maybe that chunk of code should not be a separate component.
6. If I feel that my component is doing too many things at once, I should consider splitting it into multiple components.