/*! For license information please see 2c7e49d0.031b574d.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[411],{70154:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>d,frontMatter:()=>r,metadata:()=>i,toc:()=>u});var s=n(85893),o=n(11151);const r={sidebar_position:4,title:"useFetch",comment:!0,tags:["Reactjs","Custom Hook","useFetch"]},c=void 0,i={id:"reactjs/custom-hook/use-fetch",title:"useFetch",description:"",source:"@site/issues/reactjs/custom-hook/use-fetch.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-fetch",permalink:"/issues/reactjs/custom-hook/use-fetch",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-fetch.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useFetch",permalink:"/issues/tags/use-fetch"}],version:"current",sidebarPosition:4,frontMatter:{sidebar_position:4,title:"useFetch",comment:!0,tags:["Reactjs","Custom Hook","useFetch"]},sidebar:"tutorialSidebar",previous:{title:"useTimeout",permalink:"/issues/reactjs/custom-hook/use-timeout"},next:{title:"useClickOutside",permalink:"/issues/reactjs/custom-hook/use-click-outside"}},a={},u=[];function l(e){const t={code:"code",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useAsync = (callback, dependencies = []) => {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState();\n  const [value, setValue] = useState();\n\n  const callbackMemoized = useCallback(() => {\n    setLoading(true);\n    setError(undefined);\n    setValue(undefined);\n    callback()\n      .then(setValue)\n      .catch(setError)\n      .finally(() => setLoading(false));\n  }, dependencies);\n\n  useEffect(() => {\n    callbackMemoized();\n  }, [callbackMemoized]);\n\n  return { loading, error, value };\n};\n\nconst DEFAULT_OPTIONS = {\n  headers: { 'Content-Type': 'application/json' },\n};\n\nconst useFetch = (url, options = {}, dependencies = []) => {\n  return useAsync(() => {\n    return fetch(url, { ...DEFAULT_OPTIONS, ...options }).then((res) => {\n      if (res.ok) return res.json();\n      return res.json().then((json) => Promise.reject(json));\n    });\n  }, dependencies);\n};\n\nconst App = () => {\n  const [id, setId] = useState(1);\n\n  const { loading, error, value } = useFetch(\n    `https://jsonplaceholder.typicode.com/todos/${id}`,\n    {},\n    [id],\n  );\n\n  return (\n    <>\n      <div>{id}</div>\n      <button onClick={() => setId((prev) => prev + 1)}>Increment ID</button>\n      <div>Loading: {loading.toString()}</div>\n      <div>{JSON.stringify(error, null, 2)}</div>\n      <div>{JSON.stringify(value, null, 2)}</div>\n    </>\n  );\n};\n\nrender(<App />);\n"})})}function d(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},75251:(e,t,n)=>{var s=n(67294),o=Symbol.for("react.element"),r=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,n){var s,r={},u=null,l=null;for(s in void 0!==n&&(u=""+n),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(l=t.ref),t)c.call(t,s)&&!a.hasOwnProperty(s)&&(r[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===r[s]&&(r[s]=t[s]);return{$$typeof:o,type:e,key:u,ref:l,props:r,_owner:i.current}}t.Fragment=r,t.jsx=u,t.jsxs=u},85893:(e,t,n)=>{e.exports=n(75251)},11151:(e,t,n)=>{n.d(t,{Z:()=>i,a:()=>c});var s=n(67294);const o={},r=s.createContext(o);function c(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:c(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);