Top React Hooks — Lock Scrolling, Animation Loop, Session Storage, and Throttling

Photo by Anders Wideskott 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.

react-use

The react-use library is a big library with many handy hooks.

useLockBodyScroll

The useLockBodyScroll hook lets us lock the scrolling of the body element.

It’s useful for modals and overlays.

It takes an argument to let us lock scrolling or not.

For example, we can write:

import React from "react";
import { useLockBodyScroll, useToggle } from "react-use";
export default function App() {
  const [locked, toggleLocked] = useToggle(false);
  useLockBodyScroll(locked);
  return (
    <div>
      <button onClick={() => toggleLocked()}>
        {locked ? "Unlock" : "Lock"}
      </button>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We have a button to toggle the locked state.