Можно ли переиспользовать компоненты внутри одного слоя в FSD?

Feature-Sliced Design (FSD) — это архитектурная методология для фронтенд-приложений, которая организует код по бизнес-возможностям (фичам) и техническим слоям. Одним из её ключевых принципов является управление зависимостями и переиспользованием кода.

Переиспользование внутри слоя

Внутри одного слоя (например, shared, entities, features) компоненты, функции и другие модули активно переиспользуются. Это не только разрешено, но и поощряется, так как снижает дублирование и улучшает согласованность. Слой shared специально создан для хранения переиспользуемых примитивов, таких как UI-компоненты, утилиты и хелперы.

Пример переиспользования

Представьте, что у вас есть компонент кнопки в слое shared/ui. Его можно использовать в десятках мест по всему приложению, в том числе внутри других компонентов того же слоя shared (например, в компоненте модального окна) или в компонентах вышележащих слоёв.

// shared/ui/Button/Button.tsx
export const Button = ({ children, onClick }) => {
  return (
    
      {children}
    
  );
};

// shared/ui/Modal/Modal.tsx
import { Button } from '../Button/Button';
export const Modal = ({ onClose }) => {
  return (
    
      Modal Content
      Close
    
  );
};

Важные ограничения

Несмотря на свободу внутри слоя, важно соблюдать направление зависимостей между слоями. Зависимости могут идти только сверху вниз (от более высоких слоёв, таких как pages или features, к более низким, таким как entities и shared). Компонент внутри слоя features не должен импортировать и использовать компонент из другого слайса того же слоя features, если это не оправдано общей бизнес-логикой — это может привести к сильной связности.

Итог: Переиспользование компонентов внутри одного слоя в FSD — это стандартная и рекомендуемая практика для построения непротиворечивой и поддерживаемой кодовой базы, но оно должно осуществляться с учётом правил изоляции слайсов и направленности зависимостей.