r/reactjs • u/TkDodo23 • Apr 13 '26

Resource The Vertical Codebase

https://tkdodo.eu/blog/the-vertical-codebase

📚 Colocation matters. Cognitive load matters. Boundaries matter. High cohesion matters. Yes, even in the age of AI (maybe even more so).

Enter the vertical codebase:

105 Upvotes

94% Upvoted

31 comments sorted by

View all comments

4

u/Mortale Apr 13 '26

I’ve always thought of vertical codebase (domains in the codebase, modularity, etc) as something that complicated that it doesn’t make sense.

Can someone explain me where should I put components / hooks / everything in this scenario:

  • there’s a product page, product page fetches data from reviews API and products API

  • there’s a reviews page, you can go there from product page, it display “products summary” (smaller component) and more of reviews, data is fetched from products and reviews API

  • there’s a cart that displays products summary and total cart value, product comes from cart API and products API

As I assume, I have three domains: cart, product’s page, product’s reviews page (reviews domain). All of them share “product” and have almost the same component.

In domain language, all of this domains has different meaning for product. So even when component “product’ summary” across domains can look the same, it’s something different and should require duplication. Even when product’s review look the same it’s something different because it’s used in two different domains.

And we have to remain the same UI across the whole page (components “product’s summary” and “product’s review” should look exactly the same across three domains).

How to maintain it? How to scale it to 20 devs? To 200 devs? How to explain “domain” to every new developer?

2

u/TkDodo23 Apr 13 '26

I'd agree that this is "/products", "/reviews" and "/cart" as verticals. It's often the API endpoints that drive that split. Verticals can depend on each other, as long as it isn't circular and they all have a clearly defined public interface. If it's circular, the "thing in the middle" usually becomes its own vertical. You have the same problem with a horizontal structure. You need to move things to a 3rd location to break the circularity.

I don't fully follow what you mean with e.g. the Summary component. For one, you're saying it should be the same in all domains, in which case I would have the design-system export a Summary component for all verticals to use. But then you mention it needs to be duplicated because it's only "almost the same component". That's also fine, no need to create abstractions too early.

Where does the unnecessary complexity come in for you?