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

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

У кожному React-проєкті ми пишемо одне й те саме при роботі з API: setPendng, setError, setData, та весь час працюємо з useEffect + try/catch.

Автор статті на medium пропонує просте рішення — кастомний хук useAsync для роботи з API.

Переваги:

• централізоване керування (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

Якщо вам цікаво читати шортси англомовних статей українською, то ви можете більше для себе знайти у моєму блозі crynet.dev