Top React Hooks — Timers, Key Presses, Local Storage

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 Recipes

React Recipes comes with many hooks that we can use to do various things.

The useInterval hook lets us run a piece of code periodically.

For instance, we can write:

import React from "react";
import { useInterval } from "react-recipes";

export default function App() {
  const [count, setCount] = React.useState(0);
  useInterval(
    () => {
      setCount(count => count + 1);
    },
    1000,
    true
  );

  return <div>{count}</div>;
}

We have the useInterval hook.

The callback is what’s run after a period.

The 2nd argument is the period.

The 3rd is whether we run the callback on mount or not.

We can use the useIsClient hook to check if JavaScript is loaded on the client-side or not.

For instance, we can write:

import React from "react";
import { useIsClient } from "react-recipes";

export default function App() {
  const isClient = useIsClient();

  return <div>{isClient && "client side rendered"}</div>;
}

We call the useIsClient hook which returns a boolean which indicates that the code is loaded from the client-side if it’s true .

The useKeyPress hook lets us add keydown and keyup listeners to any key.

For instance, we can write:

import React from "react";
import { useKeyPress } from "react-recipes";

export default function App() {
  const hPress = useKeyPress("h");

  return <div>{hPress && "h key pressed"}</div>;
}

We use the useKeyPress hook by passing in a string with the key we want to watch form.

If the ‘h’ key is pressed, the hPress is true .

The useLocalStorage hook lets us set and store values in local storage.

For example, we can write:

import React from "react";
import { useLocalStorage } from "react-recipes";

export default function App() {
  const [name, setName] = useLocalStorage("name", "james");

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}

We use the useLocalStorage hook with the key and value to store.

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

The state will be automatically saved in local storage.

The useLockBodyScroll hook lets us local the scrolling.

It’s handy for creating things like modals.

For example, we can write:

import React from "react";
import { useLockBodyScroll } from "react-recipes";

function Modal({ title, children, onClose }) {
  useLockBodyScroll();

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal">
        <h2>{title}</h2>
        <p>{children}</p>
      </div>
    </div>
  );
}

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>open modal</button>
      {isOpen && (
        <Modal title="The title" onClose={() => setIsOpen(false)}>
          modal content
        </Modal>
      )}
    </>
  );
}

We use the useLockBodyScroll hook without any arguments in the Modal component.

Then we can use Modal in App to toggle it on and off.

Conclusion

React Recipes comes with hooks for running code periodically, locking scrolling, setting local storage, and watching key presses.