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

create useFetch custom hooks

Add Answer

DevEmdad answered on September 23, 2021 Popularity 7/10 Helpfulness 2/10

answer create useFetch custom hooks

related useFetch custom hook for React

related basic useFetch custom hook

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

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

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

create useFetch custom hooks

Contents

More Related Answers

create useFetch custom hooks

Closely Related Answers

useFetch custom hook for React

basic useFetch custom hook

Grepper

Documentation

Social

Legal

Contact

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