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

react fetch custom hook

Add Answer

AhmedHassan answered on July 7, 2022 Popularity 9/10 Helpfulness 5/10

answer react fetch custom hook

related custom fetch hook-react.js

related custom fetch hook for react.js GET and POST request

react fetch custom hook

Comment

import { useEffect, useState } from "react"
import axios from "axios"


export default function useFetch(url){

    const [data,setData] = useState(null)
    const [error,setError] = useState(null)
    const [loading,setLoading] = useState(false)

    useEffect(() => {
        (
            async function(){
                try{
                    setLoading(true)
                    const response = await axios.get(url)
                    setData(response.data)
                }catch(err){
                    setError(err)
                }finally{
                    setLoading(false)
                }
            }
        )()
    }, [url])

    return { data, error, loading }

}

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: dev.to

Tags: fetch hook javascript

Link to this answer
Share Copy Link

Contributed on Jul 07 2022

AhmedHassan

0 Answers Avg Quality 2/10

Closely Related Answers

custom fetch hook-react.js

Comment

import { useState, useEffect } from "react"

export const useFetch = (url) => {
  const [data, setData] = useState(null)
  const [isPending, setIsPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const controller = new AbortController()

    const fetchData = async () => {
      setIsPending(true)
      
      try {
        const res = await fetch(url, { signal: controller.signal })
        if(!res.ok) {
          throw new Error(res.statusText)
        }
        const data = await res.json()

        setIsPending(false)
        setData(data)
        setError(null)
      } catch (err) {
        if (err.name === "AbortError") {
          console.log("the fetch was aborted")
        } else {
          setIsPending(false)
          setError('Could not fetch the data')
        }
      }
    }

    fetchData()

    return () => {
      controller.abort()
    }

  }, [url])

  return { data, isPending, error }
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Aug 03 2022

Grumpy Giraffe

0 Answers Avg Quality 2/10

custom fetch hook for react.js GET and POST request

Comment

import { useState, useEffect } from "react"

export const useFetch = (url, method = "GET") => {
  const [data, setData] = useState(null)
  const [isPending, setIsPending] = useState(false)
  const [error, setError] = useState(null)
  const [options, setOptions] = useState(null)

  const postData = (postData) => {
    setOptions({
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(postData)
    })
  }

  useEffect(() => {
    const controller = new AbortController()

    const fetchData = async (fetchOptions) => {
      setIsPending(true)
      
      try {
        const res = await fetch(url, { ...fetchOptions, signal: controller.signal })
        if(!res.ok) {
          throw new Error(res.statusText)
        }
        const data = await res.json()

        setIsPending(false)
        setData(data)
        setError(null)
      } catch (err) {
        if (err.name === "AbortError") {
          console.log("the fetch was aborted")
        } else {
          setIsPending(false)
          setError('Could not fetch the data')
        }
      }
    }

    // invoke the function
    if (method === "GET") {
      fetchData()
    }
    if (method === "POST" && options) {
      fetchData(options)
    }

    return () => {
      controller.abort()
    }

  }, [url, method, options])

  return { data, isPending, error, postData }
}

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: fetch get hook javascript ja

Link to this answer
Share Copy Link

Contributed on Aug 10 2022

Grumpy Giraffe

0 Answers Avg Quality 2/10

react fetch custom hook

Contents

More Related Answers

react fetch custom hook

Closely Related Answers

custom fetch hook-react.js

custom fetch hook for react.js GET and POST request

Grepper

Documentation

Social

Legal

Contact

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