Function-first means that we separate each file into the folder they belong to by their usage. For example in a modern frontend project we might have the following folders:
/components: Dumb components who only have presentational purposes/containers: Smart components who fetch data and have the logic to parse or modify it before sending it into the dumb components:/store: Contains all the store files like actions, reducers, selectors, etc.
This might be troublesome when having a large application. For example you might see yourself adding a lot of containers for each page and then having problems finding the file you want inside the containers folder. A common approach to solve this is put every container file inside a folder with the feature name, but then we are using feature-first.
Aside from that, one advantatge of using this approach will be if in the future we would like to change some parts of our architecture, like removing Redux or getting rid of the containers/presentational components and have a single components folder we could simply move all the files inside the folder who have all the files, otherwise if we follow the feature-first approach we would have to go folder by folder to move it.
Feature-first means that the top-level directories are named after the main features of the app: product, cart, session. This approach scales much better because each new feature comes with a new folder. But you have no separation between the React components and Redux. Changing one of them in the long run is a very tricky job. Additionally you have files that do not belong to any feature. You end up with a folder named common or shared because you want to reuse code across many features in your app.
