Как правильно декомпозировать компоненты?

Декомпозиция компонентов — это фундаментальный навык в разработке на React, который превращает монолитные, сложные для понимания компоненты в дерево маленьких, управляемых и часто переиспользуемых частей. Основная цель — повысить читаемость, упростить тестирование и облегчить совместную работу в команде.

Ключевые принципы декомпозиции

• Принцип единственной ответственности (SRP): Каждый компонент должен решать одну конкретную задачу. Если компонент начинает делать слишком много (например, и загружает данные, и отрисовывает сложный список, и обрабатывает форму), его стоит разделить.
• Выделение переиспользуемых частей UI: Повторяющиеся элементы интерфейса (кнопки, карточки, поля ввода с общей логикой) следует выносить в отдельные компоненты.
• Разделение логики и представления: Используйте паттерн «Контейнеры и презентационные компоненты». Контейнеры управляют состоянием и логикой, а презентационные компоненты только отрисовывают данные, полученные через props.
• Использование кастомных хуков: Сложную бизнес-логику или логику работы с побочными эффектами можно инкапсулировать в кастомные хуки, что делает компоненты более чистыми.

Практический пример

Рассмотрим монолитный компонент пользовательского профиля, который загружает данные и отображает их.

// Плохо: один большой компонент
function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

  if (loading) return Loading...;
  return (
    
      {user.name}
      
      Email: {user.email}
       alert('Edited!')}>Edit Profile
    
  );
}

Теперь декомпозируем его:

// 1. Кастомный хук для логики загрузки данных
function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data);
      setLoading(false);
    });
  }, [userId]);

  return { user, loading };
}

// 2. Презентационный компонент для отображения профиля
function UserProfileView({ user, onEdit }) {
  return (
    
      {user.name}
      
      Email: {user.email}
      Edit Profile
    
  );
}

// 3. Переиспользуемый компонент загрузки
function Loader() {
  return Loading...;
}

// 4. Основной компонент-контейнер, который всё связывает
function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  const handleEdit = () => alert('Edited!');

  if (loading) return ;
  return ;
}

В результате мы получили несколько независимых модулей: хук для данных, чистый компонент отображения, компонент-индикатор и главный компонент, который их координирует. Каждую часть теперь можно тестировать и изменять отдельно.

Вывод: Декомпозицию стоит применять всегда, когда компонент становится слишком большим или выполняет несколько несвязанных задач. Это особенно полезно в больших приложениях для поддержания архитектурной чистоты и упрощения рефакторинга.