Skip to content

Instantly share code, notes, and snippets.

@sahilrajput03
Last active October 1, 2020 11:27
Show Gist options
  • Save sahilrajput03/65bc03f107f24c88cb98c1274fc03368 to your computer and use it in GitHub Desktop.
Save sahilrajput03/65bc03f107f24c88cb98c1274fc03368 to your computer and use it in GitHub Desktop.
This is a react hook for fetching data.
// Usage -
//import {useFetch} from "./useFetch.js";
//const url = "https://raw.githubusercontent.com/ajzbc/kanye.rest/quotes/quotes.json";
//const {data, loading} = useFetch(url);
// --
//Defining hook inside useFetch.js file.
import { useEffect, useState, useRef } from "react";
export const useFetch = (url) => {
const isMounted = useRef(true);
const [state, setState] = useState({ data: null, loading: true });
// Below useEffect hook sets isMounted.current to false, when our component is no longer exits, i.e., unomunted state.
useEffect(() => {
return () => {
isMounted.current = false;
};
}, []);
useEffect(() => {
setState((state) => ({ data: state.data, loading: true }));
fetch(url)
.then((x) => x.json())
/* Change x.json() to x.text() if you want to get data as text. */
.then((data) => {
/* This isMounted.current flag check is important coz `React` would throw error if try to attempt state update on unmounted component(*unmounted* => which doesn't exists in dom at the moment). */
if (isMounted.current) {
setState({ data, loading: false });
}
});
}, [url, setState]);
/* Just need to return the state from this customHook now. */
return state;
};
// Source: ben awad's useEffect's video + PERSONAL COMMENTS.
// Source(recommended from react.js): https://www.robinwieruch.de/react-hooks-fetch-data
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment