custom hook for API call using react

react_custom_hook.js

//App.js
import React from 'react';
import './style.css';
import { fetchUsers } from './custom_hook.js';

export default function App() {
  const { data, loading, error } = fetchUsers(
    'https://jsonplaceholder.typicode.com/posts'
  );

  if (loading) {
    return <div>{'loading'}</div>;
  }

  if (error) {
    return <div>{'Error'}</div>;
  }
  return (
    <div>
      {data.map((item, idx) => (
        <h3 key={idx}>{item.title}</h3>
      ))}
    </div>
  );
}

//============================================================================================================

//custom_hook.js
import React, { useState, useEffect } from 'react';

export const fetchUsers = (url) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const fetchposts = await fetch(url);
        const json = await fetchposts.json();
        console.log('am i called?');
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};