В каких случаях стоит выносить логику с useEffect и fetch в кастомный хук?

Когда выносить логику с useEffect и fetch в кастомный хук

В React компоненты должны быть сосредоточены на отрисовке UI, а не на управлении побочными эффектами. Если вы замечаете, что один и тот же паттерн с useEffect и fetch повторяется в нескольких компонентах, это явный сигнал к вынесению логики в кастомный хук. Это не только уменьшает дублирование кода, но и делает компоненты более читаемыми и тестируемыми.

Пример: без кастомного хука

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Пример: с кастомным хуком

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function UserProfile({ userId }) {
  const { data: user, loading } = useFetch(`/api/users/${userId}`);
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Когда это особенно полезно

• Логика загрузки данных используется в нескольких компонентах (например, списки, детальные страницы).
• Вы хотите добавить обработку ошибок, отмену запросов или кэширование централизованно.
• Компонент становится слишком большим из-за смешивания логики и UI.

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