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

Когда выносить код в отдельные компоненты

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

Основные критерии

• Повторение: Один и тот же блок кода встречается в разных частях приложения. Например, кнопка с определённым стилем и поведением.
• Сложность: Компонент содержит много вложенных элементов, условной логики или обработчиков событий. Разделение на более мелкие части упрощает понимание.
• Переиспользование: Логика или интерфейс могут понадобиться в других проектах или модулях. Например, кастомный инпут или модальное окно.
• Тестирование: Маленькие компоненты легче тестировать изолированно, чем большой монолитный блок.

Пример

Допустим, у вас есть список пользователей, где каждый элемент отображает аватар, имя и email. Вместо того чтобы писать всю разметку внутри родительского компонента, выносим элемент в отдельный компонент UserCard.

// UserCard.jsx
function UserCard({ user }) {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

// UserList.jsx
function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

Теперь UserCard можно переиспользовать в любом месте, где нужно отобразить пользователя. Родительский компонент стал чище и отвечает только за рендеринг списка.

Вывод

Выносите код в отдельные компоненты, когда это повышает читаемость, переиспользование или упрощает тестирование. Не делайте это преждевременно — начинайте с простой структуры и рефакторите по мере роста приложения.