Top React Hooks — Fetch, Scroll, and Modals

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.

fetch-suspense

We can use the fetch-suspense package to do fetch and display a loading component while the data is loading.

To use it, we can install it by running:

npm install fetch-suspense

or:

yarn add fetch-suspense

Then we can use it by writing:

index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Suspense fallback={<p>Loading...</p>}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Suspense>,
  rootElement
);

App.js

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

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

  return <div className="App">{JSON.stringify(response)}</div>;
}

We add the Suspense component to the root component with the fallback component in the fallback prop.

Then in App , we use the useFetch hook to fetch the data we want.

The response is returned in the function.

Modali

The Modali package is a library for creating a modal.

We install it by running:

npm install --save modali

Then we can use it by writing:

import React from "react";
import Modali, { useModali } from "modali";

export default function App() {
  const [exampleModal, toggleExampleModal] = useModali();

  return (
    <div className="app">
      <button onClick={toggleExampleModal}>Click me</button>
      <Modali.Modal {...exampleModal}>Hello world</Modali.Modal>
    </div>
  );
}

We use the useModali hook to return the props for the Modali.Modal component.

The toggleExampleModal function is used to toggle the opening of the modal.

moment-hooks

The moment-hooks library is a library that comes with various utility hooks that we can use.

We can install it with:

yarn install moment-hooks

Then we can use it by writing:

import React from "react";
import { useOutsideClick } from "moment-hooks";

export default function App() {
  const ref = React.useRef();
  useOutsideClick(ref, () => console.log(" clicked outside"));
  return (
    <div className="app" ref={ref}>
      hello
    </div>
  );
}

We use the useOutsideClick hook by passing in the ref of the component that we want to check whether we clicked outside.

It also comes with the useArray hook to make handling state arrays easier.

We can use it to create a state array.

And we can use it to update the array with the functions returned by the hook.

For instance, we can write:

import React from "react";
import { useArray } from "moment-hooks";

export default function App() {
  const [list, actions] = useArray(["new item"]);

  return (
    <div className="app">
      <button onClick={() => actions.push("new item")}>add</button>
      {list.map(l => (
        <p>{l}</p>
      ))}
    </div>
  );
}

We have the actions object, which has array methods like push to add a new item to the array.

list has the array itself.

actions also has the removeIndex function to let us remove an item by its index.

The useLockBodyScroll hook disables scrolling on the body.

For instance, we can use it by writing:

import React from "react";
import { useLockBodyScroll } from "moment-hooks";

export default function App() {
  useLockBodyScroll(true);
  return (
    <div className="app">
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We called the useLockBodyScroll hook with argument true to disable scrolling on the body.

Now we can’t scroll even if a list of items displayed that overflow the body.

Conclusion

fetch-suspense lets us the Suspense component while fetching data.

Modali is a hook for creating modals.

moment-hooks has many hooks that help us with various things