Top React Hooks — IDs, Infinite Scrolling, and IndexDB

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-use-id-hook

The react-use-id-hook library lets us create unique IDs easily within our React component.

We can install it by running:

npm i react-use-id-hook

Then we can use it by writing:

index.js

import React from "react";
import ReactDOM from "react-dom";
import { IdProvider } from "react-use-id-hook";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <IdProvider>
    <App />
  </IdProvider>,
  rootElement
);

App.js

import React from "react";
import { useId } from "react-use-id-hook";

export default function App() {
  const id = useId();
  const [value, setValue] = React.useState();

  return (
    <form>
      <input
        id={id}
        type="checkbox"
        checked={value}
        onChange={ev => setValue(ev.target.checked)}
      />
      <label htmlFor={id}>Click me</label>
    </form>
  );
}

We use the useId hook to generate our ID.

Then we pass it into props or wherever we want to use it.

We’ve to remember to wrap our app with the IdProvider so we can use the hook.

react-use-idb

react-use-idb lets us use IndexDB to store our data without using the native library.

To install it, we run:

npm i react-use-idb

Then we can use it by writing:

import React from "react";
import { useIdb } from "react-use-idb";

export default function App() {
  const [value, setValue] = useIdb("key", "foo");

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue("bar")}>bar</button>
      <button onClick={() => setValue("baz")}>baz</button>
    </div>
  );
}

The useIdb hook takes a key and initial value.

It returns an array with the value and a function to set the value in this order.

Then we can use that as we did in the onClick handlers.

It takes one argument to set the data.

react-use-infinite-loader

The react-use-infinite-loader package lets us add infinite scrolling to our React app.

To install it, we run:

yarn add react-use-infinite-loader

Then we can use it by writing:

import React from "react";
import useInfiniteLoader from "react-use-infinite-loader";

export default function App() {
  const [canLoadMore, setCanLoadMore] = React.useState(true);
  const [data, setData] = React.useState([]);
  const loadMore = React.useCallback(() => {
    setTimeout(() => {
      setCanLoadMore(true);
      setData(currentData => [
        ...currentData,
        ...Array(20)
          .fill()
          .map((_, i) => i)
      ]);
    }, 1000);
  });
  const { loaderRef } = useInfiniteLoader({ loadMore, canLoadMore });

  return (
    <>
      {data.map(data => (
        <div>{data}</div>
      ))}
      <div ref={loaderRef} />
    </>
  );
}

We added the loadMore function to load our data,.

We put our data loading code in a callback so that the calls can be cached.

The data loading code just push more data into the data array.

Then we have the useInfiniteLoader to let us create a ref for the element to watch the for items to load.

The hook takes an object with the loadMore function to load more data.

canLoadMore tells the library whether we have more data to load.

We pass it into the div so that new data will load when we load the div.

Conclusion

The react-use-id-hook lets us create an ID in our React component.

react-use-idb is a library that lets us interact with the browser’s indexedDB database.

The react-use-infinite-loader library lets us add infinite scrolling to our React app.