Frontend Советы: “Почему ваши UI-компоненты растут как снежный ком и как этого избежать…”

Почему ваши UI-компоненты растут как снежный ком и как этого избежать

Когда один компонент делает всё: и рисует интерфейс, и тянет данные, и валидирует форму, и ещё 20 мелких задач. Такой код трудно поддерживать, тестировать и переиспользовать.

🧩 Как понять, что компонент уже перерос нормы?

- У него больше 200–250 строк.
- Он содержит и бизнес-логику, и сетевые запросы, и рендер - всё вперемешку.
- В нём много useEffect, часть из которых «о чём-то своём».
- Вы боитесь открыть файл, потому что там хаос.

🛠️ Что делать, чтобы этого избежать?

1. Выносите бизнес-логику в кастомные хуки

Например, вместо:


function UsersList() {
  const [users, setUsers] = useState([]);

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

  return users.map(u => <UserCard key={u.id} user={u} />);
}

Сделайте:


function useUsers() {
  const [users, setUsers] = useState([]);

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

  return users;
}

function UsersList() {
  const users = useUsers();
  return users.map(u => <UserCard key={u.id} user={u} />);
}

UI остаётся чистым.

2. Разделяйте компонент на контейнер и представление

- Контейнер — получает данные и передаёт вниз.
- Представление — только отображает.

3. Удаляйте «лишние» обязанности

Если компонент отвечает больше чем за одну задачу, значит это уже два компонента.

4. Не бойтесь мелких файлов

Один компонент = один файл = одна ответственность.

👉@frontend_sovet