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

useFetch custom hook for React

Add Answer

Brave Bear answered on September 23, 2021 Popularity 9/10 Helpfulness 6/10

answer useFetch custom hook for React

related create useFetch custom hooks

related basic useFetch custom hook

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 javascript

Link to this answer
Share Copy Link

Contributed on Sep 23 2021

Brave Bear

0 Answers Avg Quality 2/10

Closely Related Answers

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

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 wha

Link to this answer
Share Copy Link

Contributed on Oct 21 2022

Lucas Okafor

0 Answers Avg Quality 2/10

useFetch custom hook for React

Contents

More Related Answers

useFetch custom hook for React

Closely Related Answers

create useFetch custom hooks

basic useFetch custom hook

Grepper

Documentation

Social

Legal

Contact

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