Custom hooks म्हणजे काय आणि तू एक कसे लिहितोस?

// extract "fetch + loading + error" logic once, reuse everywhere
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const ctrl = new AbortController();
    setLoading(true);
    fetch(url, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setData)
      .catch(e => { if (e.name !== "AbortError") setError(e); })
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [url]);

  return { data, loading, error };
}

// usage — the component stays declarative:
function Profile({ id }) {
  const { data, loading, error } = useFetch(`/api/users/${id}`);
  if (loading) return <Spinner />;
  return <h1>{data.name}</h1>;
}