React: What is Feature-Sliced Design?

Feature-Sliced Design (FSD) is a code organization methodology in React projects that divides everything into layers and modules by functionality.

Simple analogy: Imagine you are building a house.

• Without FSD — all materials are piled in one heap: bricks, wiring, pipes, windows — everything is mixed.
• With FSD — each part of the building has its place: foundation (shared), frame (entities), rooms (features), layout (pages).

FSD layers (top to bottom):

1. App — application setup (router, global styles, store).
2. Pages — pages (home page, user page).
3. Widgets — independent blocks (header, sidebar, footer).
4. Features — features (registration, search, cart).
5. Entities — entities (User, Product, Order).
6. Shared — common (UI components, utilities, API).

Rules:

• Upper layer can use lower, but not vice versa.
• Features cannot import from Widgets.
• Shared can be used by all.

Advantages:

1. Loose coupling — changes in one feature do not break others.
2. Logic isolation — easier to remove/replace a feature.
3. Reusability — entities and shared can be reused between projects.
4. Scalability — teams can work on different features independently.

Example structure: