30 Second to React - Collection of useful React snippets

Today i want to speak about this beautiful collection of React snippet that i found on github

There are some useful function, in my opinion the most important are about the use of Hooks.

I report here the Hooks found on GitHub

Hooks

useFetch
useInterval
useNavigatorOnline
useTimeout

useFetch

A hook that implements fetch in a declarative manner.

Create a custom hook that takes a url and options.
Use the React.useState() hook to initialize the response and error state variables.
Use the React.useEffect() hook to anychronously call fetch() and update the state varaibles accordingly.
Return an object containting the response and error state variables.

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);

  return { response, error };
};

useInterval

A hook that implements setInterval in a declarative manner.

Create a custom hook that takes a callback and a delay.
Use the React.useRef() hook to create a ref for the callback function.
Use the React.useEffect() hook to remember the latest callback.
Use the React.useEffect() hook to set up the interval and clean up.

const useInterval = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

useNavigatorOnLine

A hook that returns if the client is online or offline.

Create a function, getOnLineStatus, that uses the NavigatorOnLine web API to get the online status of the client.
Use the React.useState() hook to create an appropriate state variable, status, and setter.
Use the React.useEffect() hook to add listeners for appropriate events, updating state, and cleanup those listeners when unmounting.
Finally return the status state variable.

const getOnLineStatus = () =>
  typeof navigator !== "undefined" && typeof navigator.onLine === "boolean"
    ? navigator.onLine
    : true;

const useNavigatorOnLine = () => {
  const [status, setStatus] = React.useState(getOnLineStatus());

  const setOnline = () => setStatus(true);
  const setOffline = () => setStatus(false);

  React.useEffect(() => {
    window.addEventListener("online", setOnline);
    window.addEventListener("offline", setOffline);

    return () => {
      window.removeEventListener("online", setOnline);
      window.removeEventListener("offline", setOffline);
    };
  }, []);

  return status;
};

useTimeout

A hook that implements setTimeout in a declarative manner.

Create a custom hook that takes a callback and a delay.
Use the React.useRef() hook to create a ref for the callback function.
Use the React.useEffect() hook to remember the latest callback.
Use the React.useEffect() hook to set up the timeout and clean up.

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

By : Cicciokr

30 Second to React – Collection of useful React snippets

Hooks

useFetch

useInterval

useNavigatorOnLine

useTimeout

Leave a Reply