Most Awesome Hooks for your React project
Tags: react, hooks, webdev, javascript
Published: 2021-05-12 20:35:26

React.js is currently one of the most popular JavaScript libraries for front-end developers. 

React really changed the way we build Single-page applications (SPAs). One of its greatest features is hooks that introduced in React 16.8 and that new feature enables the possibility of using functional components instead of class components handling the state with the Hooks.

React offers ways to implement our own custom hooks. Some awesome custom hooks are:

## useTimeout Hook
With this custom hook, we can implement a javascript setTimeout using a declarative approach.
### Code
```javascript
import { useEffect, useRef } from 'react';

const useTimeout = (callback, timeout) => {
  const savedCallback = useRef(null);
  savedCallback.current = callback;

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

  useEffect(
    () => {
      if (timeout) {
        const timeoutId = setTimeout(() => {
          savedCallback.current();
        }, timeout);
        return () => clearTimeout(timeoutId)
      }
    },
    [timeout]
  )
}
```
### Example of use
```javascript
import { useState } from 'react';

const ExampleComponent = () => {
  const [message, setMessage] = useState('');
  useTimeout(() => {
    setMessage('Hello World');
  }, 7500);

  return (<p>{message}</p>);
}
```

[![Edit useTimeout](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usetimeout-ebmqm?fontsize=14&hidenavigation=1&theme=dark)

## usePrevious Hook
With this custom hook, we can have access to the previous state related to the components.
### Code
```javascript
import { useEffect, useRef } from 'react';

const usePrevious = (state) =>  {
  const ref = useRef();

  useEffect(() => {
    ref.current = state;
  });

  return ref.current;
}
```

### Example of use
```javascript
import { useState } from 'react';

const ExampleComponent = () => {
  const [counter, setCounter] = useState(0);
  const previousCounter = usePrevious(counter);

  return (
    <>
      <p>Counter: {counter}</p>
      <p>Previous Counter: {previousCounter}</p>
      <button onClick={() => setCounter(counter + 1)}>Next</button>
    </>
  );
}
```

[![Edit usePrevious](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/useprevious-shx7d?fontsize=14&hidenavigation=1&theme=dark)

## useInterval Hook
With this custom hook, we can implement javascript setInterval using a declarative approach.
### Code
```javascript
import { useEffect, useRef } from 'react';

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

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

  useEffect(
    () => {
      if (delay) {
        const intervalId = setInterval(() => {
          savedCallback.current();
        }, delay);
        return () => clearInterval(intervalId)
      }
    },
    [delay]
  )
}
```

### Example of use

```javascript
import { useState } from 'react';

const ExampleComponent = () => {
  const [seconds, setSeconds] = useState(0);
  useInterval(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p> Seconds passed: {seconds}</p>;
}
```

[![Edit useInterval](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/useinterval-pbgj6?fontsize=14&hidenavigation=1&theme=dark)

## useFetch Hook
The useFetch hook can be used to implement fetch in a declarative way. Also, this custom hook helps with behaviors as loading and errors.
### Code
```javascript
import { useState, useEffect } from 'react';

const useFetch = (initialUrl, initialOptions = {}) => {
  const [url, setUrl] = useState(initialUrl);
  const [options, setOptions] = useState(initialOptions);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async() => {
      try {
        setIsLoading(true);
        const response = await fetch(url, options);
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }
    fetchData();
  }, [url, options]);

  return ({data, error, isLoading, setUrl, setOptions});
};
```

### Example of use
```javascript
const URL = 'https://jsonplaceholder.typicode.com/todos';

const ExampleComponent = () {
  const { data, error, isLoading } = useFetch(URL);

  if(isLoading) {
    return (<p>Loading...</p>)
  }

  if (error) {
    return <p>{error?.message}</p>;
  }

  const renderItem = ({id, title})=> (
    <div key = {`item-${id}`}>
      <p>{id} - {title}</p>
    </div>
  );

  return data.map(renderItem);
}
```

[![Edit useFetch](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/usefetch-n7yu6?fontsize=14&hidenavigation=1&theme=dark)

## useContructor hook
The useContructor hook can be used to implement the same behavior as class components.
### Code
```javascript
import React from 'react';

export const useConstructor = (callBack = () => {}) => {
  const [hasBeenCalled, setHasBeenCalled] = React.useState(false);
  if (hasBeenCalled) return;
  callBack();
  setHasBeenCalled(true);
};


```
I will be updating the post with new awesome Hooks