Кастомний React хук useAsync для API

Автор описує універсальний кастомний React-хук useAsync, який спрощую роботу з API та позбавляє нас від написання однотипного коду: setData, setLoading, setError тощо.

Основна проблема

У кожному компоненті постійно повторюється один і той самий шаблон:

• useState для data, loading, error
• useEffect з try/catch

Рішення

Винести всю асинхронну логіку в один кастомний хук – useAsync

Що дає useAsync

• централізоване керування (loading, error, value)
• повторне використання без копіпасту

// Hook
function useAsync(fn, deps = []) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

const run = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await fn();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, deps);
  useEffect(() => {
    if (fn) run();
  }, [run]);
  return { data, error, loading, run };
}

// Use:
const { data, loading, error } = useAsync(() => fetchDataFromAPI(), []);

// Or:
const { data, error, loading, run } = useAsync();

useEffect(() => {
  run(() => fetchDataFromAPI());
}, []);

🌏 Оригінал: medium.com