Top React Hooks — Fetch and State Helpers

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-fetch-hook

The react-fetch-hook lets us fetch data from an API with a hook.

Its size is small and Flow and TypeScript types are included.

To install it, we can run:

yarn add react-fetch-hook

or:

npm i react-fetch-hook --save

Then we can use it by writing:

import React from "react";
import useFetch from "react-fetch-hook";

export default function App() {
  const { isLoading, data } = useFetch("https://api.agify.io/?name=michael");

  return isLoading ? <div>Loading...</div> : <>{JSON.stringify(data)}</>;
}

We use the useFetch hook with the URL of the API endpoint we want to get data from.

The isLoading has the loading state and data has the data.

It supports error handling and do multiple requests.

We can also format our data in a custom format.

react-hanger

The react-hanger library comes with various hooks we can use to do various things.

To install it, we run:

yarn add react-hanger

We can use the useInput hook to do automatic form value binding.

For instance, we can write:

import React from "react";
import { useInput } from "react-hanger";

export default function App() {
  const newTodo = useInput("");

  return (
    <>
      <input type="text" value={newTodo.value} onChange={newTodo.onChange} />
      <p>{newTodo.value}</p>
    </>
  );
}

The useInput hook returns an object which has the value and onChange properties that we can pass into the respective props.

The useBoolean lets us toggle the value of a boolean easily.

For instance, we can write:

import React from "react";
import { useBoolean } from "react-hanger";

export default function App() {
  const showCounter = useBoolean(true);

  return (
    <>
      <button onClick={showCounter.toggle}>toggle</button>
      <p>{showCounter.value.toString()}</p>
    </>
  );
}

The useNumber hook lets us set a number as long as it’s within a range.

For instance, we can write:

import React from "react";
import { useNumber } from "react-hanger";

export default function App() {
  const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });

  return (
    <>
      <button onClick={() => limitedNumber.increase()}> increase </button>
      <button onClick={() => limitedNumber.decrease()}> decrease </button>
      <p>{limitedNumber.value}</p>
    </>
  );
}

We have the useNumber hook with an object with the lowerLimit and upperLimit properties.

Then we can use the increase and decrease methods to change the value property of limitedNumber .

We can’t set a number beyond the given range with it.

We can also add the loop option and set it to true so that the number will loop when it reaches the limits.

If we remove the object in the 2nd argument of the hook, then the number can be set to any value:

import React from "react";
import { useNumber } from "react-hanger";

export default function App() {
  const limitedNumber = useNumber(3);

  return (
    <>
      <button onClick={() => limitedNumber.increase()}> increase </button>
      <button onClick={() => limitedNumber.decrease()}> decrease </button>
      <p>{limitedNumber.value}</p>
    </>
  );
}

Conclusion

react-fetch-hook lets us fetch data from endpoints without hassle.

Also, we can use the react-hanger hook which various state helpers.