Что такое умные и глупые компоненты? Приведите пример.

В React принято разделять компоненты по их ответственности: одни отвечают за логику и данные, другие — за отображение. Умные компоненты (container components) знают о состоянии, работают с API, Redux, контекстом и передают данные вниз. Глупые компоненты (presentational components) получают всё через props и просто рендерят UI, не зная, откуда пришли данные.

Зачем это нужно

• Упрощает тестирование: презентационные компоненты легко проверять по входным props.
• Повышает переиспользуемость: один и тот же UI можно применять в разных местах.
• Разделяет ответственность: логика не смешивается с разметкой.

Пример

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

// Умный компонент
function UserListContainer() {
  const [users, setUsers] = React.useState([]);

  React.useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return <UserList users={users} />;
}

// Глупый компонент
function UserList({ users }) {
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Стоит применять такое разделение в средних и крупных приложениях, где важны переиспользуемость и тестируемость. В маленьких проектах иногда проще держать логику и разметку в одном компоненте.