I would like some help adding or removing items from this list and I invite any other commentary that you wish to impart.
Easy navigation. The developer can immediately see which components are connected and/or styled without opening any file. The files can be opened side by side without issue.
ViewName.vm.js file exists, it's connected to State. If a
ViewName.module.scss file exists, it's Styled. (Or, in the case of
JSS or other CSS-In-JS solution, a
ViewName.styles.js file. The
ViewName.module.scss pattern is required by Create-React-App to use CSS Modules. Also
vm stands for "view model", since State is a model for the View.
However we could rename those to
ViewName.state.js if desired.)
Less mess. Following the separation of concerns principle is a good way to prevent spaghetti code.
In a large project especially, it is common to have 9-10 imports and 50-150 lines of code just to connect and map your State to your View. It is also not uncommon to have 150-300 lines of code just to style one component. If we mix them all into one file, then files become larger and messier and it is easy for the developer to forget that there is actually a separation between all of these concerns.
Decisive organization. When you separate State, View and Style into separate files there is no question where some piece of code goes.
Does the code to connect a View to State go at the bottom of the file? In the middle, right after the View? Where do we put styles? At the top of the file or perhaps right on top of the particular View class that is being styled? With separate files, there is no question.
More files to deal with.
More files to edit to change one component. More files to look at when navigating the project.