Top React Hooks — State Utilities

Photo by Kit Suman 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.

moment-hooks

The moment-hooks library is a library that comes with various utility hooks that we can use.

We can install it with:

yarn install moment-hooks

The useDebounce hook lets us add denounce functionality to our app.

It can be used to reduce the number of times a state is updated.

For instance, we can write:

import React from "react";
import { useDebounce } from "moment-hooks";
export default function App() {
  const [inputValue] = React.useState("something");
  const debouncedInputValue = useDebounce(inputValue, 100);
  return <div className="app">{debouncedInputValue}</div>;
}

We have the useDebounce hook that takes the inputValue state.

The 2nd argument is the number of milliseconds to delay the update of the state.

The useWindowSize hook lets us get the width and height of the window.