Top React Hooks — State Utilities

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.

To use it, we write:

import React from "react";
import { useWindowSize } from "moment-hooks";

export default function App() {
  const { width, height } = useWindowSize();

  return (
    <div className="app">
      {width} x {height}
    </div>
  );
}

We call the useWindowSize hook to get the window’s width and height.

Then we can use those anywhere.

The useWhyDidYouUpdate hook gets the reason why a component has been updated.

It’s useful for debugging our components.

To use it, we can write:

import React from "react";
import { useWhyDidYouUpdate } from "moment-hooks";

const Foo = props => {
  useWhyDidYouUpdate("Register", props);

  return <div />;
};

export default function App() {
  return (
    <div className="app">
      <Foo foo="bar" />
    </div>
  );
}

Then since we have the useWhyDidYouUpdate hook has been called with 'Register' and props , it’ll log the value when the props are changed.

We’ll get the old and new value logged.

Nice Hooks

Nice Hooks is a set of hooks that does various things.

To install it, we run:

npm install nice-hooks

Then we can use the hooks that comes with it.

The useStateCB hook lets us get and set a state.

To use it, we can write:

import React from "react";
import { useStateCB } from "nice-hooks";

export default function App() {
  const [getCount, setCount] = useStateCB(0);

  function doSomething() {
    console.log(getCount());
  }

  return (
    <div>
      <p>{getCount()}</p>
      <button onClick={() => setCount(getCount() + 1, doSomething)}>
        Increase
      </button>
    </div>
  );
}

We use the useStateCB hook to return a getter and setter function for a state.

When we click the button, we call setCount to set the count.

doSomething is run after the state change is done.

getCount gets the count state.

The useSingleState hook is another hook that lets us get and set the state.

For instance, we can write:

import React from "react";
import { useSingleState } from "nice-hooks";

export default function App() {
  const [state, setState] = useSingleState({
    count: 0
  });

  function doSomething() {
    console.log(state.count);
  }

  return (
    <div>
      <p>{state.count}</p>

      <button
        type="button"
        onClick={() =>
          setState(
            {
              count: state.count + 1
            },
            doSomething
          )
        }
      >
        Increase
      </button>
    </div>
  );
}

useSingleState is another hook that returns that state and a setter for the state respectively.

setState takes an object to update the state.

It also takes a callback that runs when the state update is done.

Conclusion

monent-hooks and Nice Hooks are libraries that provide us with many hooks.