Breaking News: Grepper is joining You.com. Read the official announcement!

basic useFetch custom hook

Add Answer

Lucas Okafor answered on September 23, 2021 Popularity 8/10 Helpfulness 2/10

answer basic useFetch custom hook

related useFetch custom hook for React

related create useFetch custom hooks

basic useFetch custom hook

Comment

const useFetch = (url) => {
    const [status, setStatus] = useState('idle');
    const [data, setData] = useState([]);

    useEffect(() => {
        if (!url) return;
        const fetchData = async () => {
            setStatus('fetching');
            const response = await fetch(url);
            const data = await response.json();
            setData(data);
            setStatus('fetched');
        };

        fetchData();
    }, [url]);

    return { status, data };
};

Popularity 8/10 Helpfulness 2/10 Language whatever

Source: www.smashingmagazine.com

Tags: basic hook whatever

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Lucas Okafor

0 Answers Avg Quality 2/10

Closely Related Answers

useFetch custom hook for React

Comment

import { useEffect, useState } from 'react';

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

	useEffect(() => {
		const abortCont = new AbortController();

		fetch(url, { signal: abortCont.signal })
			.then((res) => {
				if (!res.ok) {
					throw Error('Could not fetch the data for that resource');
				}
				return res.json();
			})
			.then((data) => {
				setData(data);
				setIsLoading(false);
				setError(null);
			})
			.catch((err) => {
				if (err.name === 'AbortError') {
					console.log('Fetch aborted');
				} else {
					setError(err.message);
					setIsLoading(false);
				}
			});
		return () => abortCont.abort();
	}, [url]);
	return { data, isLoading, error };
};

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: hook

Link to this answer
Share Copy Link

Contributed on Sep 23 2021

Brave Bear

0 Answers Avg Quality 2/10

create useFetch custom hooks

Comment

import "./App.css";
import useFetch from "./useFetch";

function App() {
  const { data: joke, loading, error, refetch } = useFetch(
    "https://v2.jokeapi.dev/joke/Any"
  );

  if (loading) return <h1> LOADING...</h1>;

  if (error) console.log(error);

  return (
    <div className="App">
      <h1>
        {joke?.setup} : {joke?.delivery}
      </h1>

      <button onClick={refetch}> Refetch</button>
    </div>
  );
}

export default App;

// ########## useFetch component  ##########
import { useEffect, useState } from "react";
import axios from "axios";

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

  useEffect(() => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url]);

  const refetch = () => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  return { data, loading, error, refetch };
}

export default useFetch;

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Dec 19 2022

DevEmdad

0 Answers Avg Quality 2/10

basic useFetch custom hook

Contents

More Related Answers

basic useFetch custom hook

Closely Related Answers

useFetch custom hook for React

create useFetch custom hooks

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.