React Notes

Isolate fetch using custome hook:

To use this custom hook, you would simply import it into your component and call it with the URL of the API you want to fetch data from. The custom hook will return an object with three properties: data, loading, and error. You can use these properties to display the data to the user, show a loading indicator, or handle any errors that occur.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
};