I would like some help adding or removing items from this list and I invite any other commentary that you wish to impart.
Pros and Cons of Separate Files for State, View and Style
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.jsfile exists, it's connected to State. If a
ViewName.module.scssfile exists, it's Styled. (Or, in the case of JSS or other CSS-In-JS solution, a
ViewName.module.scsspattern is required by Create-React-App to use CSS Modules. Also
vmstands for "view model", since State is a model for the View. However we could rename those to
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.