// кіріс параметрлері: // url // options export function useFetch() { // логика const fetchData = async () => {}; return { data, error, loading }; }

Міне, useFetch атты тапсырыс берушінің жеке хукінің мысалы, ол URL мен сұрау опцияларын қабылдайды және жүктеу күйін, деректерді және қателікті қайтарады:

import { useState, useEffect } from 'react';

export function useFetch(url, options) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!url) return;

    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, { ...options, signal });
        if (!response.ok) {
          throw new Error(`Қате: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, [url, JSON.stringify(options)]);

  return { data, error, loading };
}

Бұл хук url немесе options өзгерген кезде автоматты түрде сұрау жүктейді, жүктеу күйін, қателіктерді және деректерді өңдейді, сондай-ақ компоненттің бөлшектелуінде немесе параметрлер өзгерген кезде сұрауды тоқтатады.