Organizing by Feature

The question. Once there are forty files, where does each one go?

The common first answer is to group by kind: all components together, all hooks together, all utilities together. It looks tidy and it works until the application grows, at which point every change touches four folders.

Group by feature instead. Put everything belonging to search in one place: its components, its hooks, its helpers. Then a change to search happens in one folder, and deleting a feature is deleting a folder.

Keep genuinely shared things in a shared place. The test is whether two unrelated features both use it. If only one does, it belongs with that one.

When to split a component. When it has two reasons to change, when part of it has its own state, or when the same markup appears three times.

Not because a file feels long. A long component doing one clear job is easier to work with than six small ones you have to hold in your head at once.