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

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.

If it’s true , we disable locking scrolling on the body.

Otherwise, we let users scroll the body.

useRafLoop

The useRafLoop hook lets us run the requestAnimationFrame loop without re-rendering the parent component.

The loop stops automatically on component unmount.

For instance, we can write:

import React from "react";
import { useRafLoop, useUpdate } from "react-use";

export default function App() {
  const [ticks, setTicks] = React.useState(0);
  const [lastCall, setLastCall] = React.useState(0);
  const update = useUpdate();

  const [loopStop, loopStart, isActive] = useRafLoop(time => {
    setTicks(ticks => ticks + 1);
    setLastCall(time);
  });

  return (
    <div>
      <div>RAF triggered: {ticks} (times)</div>
      <div>Last high res timestamp: {lastCall}</div>
      <br />
      <button
        onClick={() => {
          isActive() ? loopStop() : loopStart();
          update();
        }}
      >
        {isActive() ? "stop" : "start"}
      </button>
    </div>
  );
}

We use the useRafLoop hook by passing in callback with the time , which is the timestamp since the loop started.

The timestamp is in milliseconds.

It returns an array with the loopStop , loopStart and isActive variables.

loopStop lets us stop the requestAnimationFrame loop.

loopStart lets us start the requestAnimationFrame loop.

isActive is true when the requestAnimationFrame loop is active.

useSessionStorage

The useSessionStorage hook lets us manage our browser’s session storage.

To use it, we write:

import React from "react";
import { useSessionStorage } from "react-use";

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

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

The useSessionStorage hook takes the key for the session storage as the first argument.

The 2nd argument is the value for the given key.

It returns the value and setValue variables to let us get and set the value respectively.

useThrottle

We can use the useThrottle hook to throttle the value updates.

To use it, we can write:

import React from "react";
import { useThrottle } from "react-use";

export default function App() {
  const [value, setValue] = React.useState(0);
  const throttledValue = useThrottle(value, 1000);

  return (
    <>
      <button onClick={() => setValue(c => c + 1)}>increment</button>
      <div>Value: {value}</div>
      <div>Throttled value: {throttledValue}</div>
    </>
  );
}

We call the useThrottle hook, which takes the state value and the number of milliseconds to delay the updates.

Then we render both the unthrottled and throttled values.

Conclusion

We can throttle state updates, lock scrolling, run the requestAnimationFrame loop, and manage session storage with the react-use library.