Top React Hooks — Fetch, Scroll, and Modals

Photo by Mark Rasmuson on Unsplash

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…