React Snippets

Custom hook to make API call and fetch data.jsx

import React, { useState, useEffect } from 'react';

/* Custom hook */
function useAPIFetch(apiURL) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  function fetchData() {
    setLoading(true);
    fetch(apiURL)
      .then((response) => response.json())
      .then((responseData) => {
        setData(responseData);
        setLoading(false);
      });
  }

  useEffect(() => {
    fetchData();
  }, []);

  return [data, fetchData, loading];
}

/* Use above custom hook as shown below */
function Block() {
  const [data, fetchData, loading] = useAPIFetch('https://jsonplaceholder.typicode.com/todos');

  return (
    <>
      <button onClick={fetchData}>Refresh</button

      <div className="block">
        {loading && <div>Loading ...</div>}
        {!loading && <div>{JSON.stringify(data)}</div>}
      </div>
    </>
  );
}