Top React Hooks — Number Animation and Timers

Photo by Bonneval Sebastien 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.

useSpring

The useSpring hook lets us update a single numeric value over time.

To use it, we’ve to install by rebound library by running:

npm i rebound

For instance, we can use it by writing:

import React from "react";
import useSpring from "react-use/lib/useSpring";
export default function App() {
  const [target, setTarget] = React.useState(50);
  const value = useSpring(target);
  return (
    <div>
      {value}
      <br />
      <button onClick={() => setTarget(0)}>Set 0</button>
      <button onClick={() => setTarget(200)}>Set 200</button>
    </div>
  );
}

We have the target which is a numeric state.

setTarget lets us set the target state.

useSpring lets us jump to the given value with an animation.