Build a Generic Data Fetching useFetch Custom Hook

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null); // Reset error on new fetch attempt
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (fetchError) {
        setError(fetchError);
      } finally {
        setLoading(false);
      }
    };

    if (url) { // Only fetch if URL is provided
      fetchData();
    }

    // Cleanup function (optional, but good practice for aborting requests)
    // const abortController = new AbortController();
    // options = { ...options, signal: abortController.signal };
    // return () => abortController.abort(); // Abort fetch on unmount
  }, [url, JSON.stringify(options)]); // Re-run if URL or options change

  return { data, loading, error };
}

// Example usage:
function PostsComponent() {
  const { data: posts, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  // For a POST request, you might pass options like:
  // const { data: postResult } = useFetch('https://jsonplaceholder.typicode.com/posts', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }),
  // });

  if (loading) return <p>Loading posts...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!posts) return <p>No posts found.</p>;

  return (
    <div>
      <h2>Latest Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostsComponent;