Top React Hooks — Number Animation and Timers

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.

This works when we pass in target to the hook.

useTimeout

The useTimeout hook lets us re-render the component after a specified number of milliseconds.

For example, we can use it by writing:

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

export default function App() {
  const [isReady, cancel] = useTimeout(1000);

  return (
    <div>
      {isReady() ? "after reload" : `before reload`}
      <br />
      {isReady() === false ? <button onClick={cancel}>Cancel</button> : ""}
    </div>
  );
}

The useTimeout function takes a duration before reloading in milliseconds.

isReady is a function that determines if the component is ready to reload.

If it is, then it returns false .

cancel is a function that lets us cancel the reloading.

useTimeoutFn

The useTimeoutFn ook lets us run a function after a given delay in milliseconds.

It doesn’t re-render the component.

Canceling is automatic.

The timeout is reset on delay change.

The reset function will cancel the previous timeout.

Timeout won’t reset on function changes.

For example, we can use it by writing:

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

export default function App() {
  const [state, setState] = React.useState("before call");

function fn() {
    setState(`called at ${Date.now()}`);
  }

const [isReady, cancel, reset] = useTimeoutFn(fn, 5000);
  const cancelButtonClick = React.useCallback(() => {
    if (isReady() === false) {
      cancel();
      setState(`cancelled`);
    } else {
      reset();
      setState("before call");
    }
  }, []);

  const readyState = isReady();

  return (
    <div>
      <div>
        {readyState !== null ? "Function will be called" : "Timer cancelled"}
      </div>
      <button onClick={cancelButtonClick}>
        {readyState === false ? "cancel" : "restart"} timeout
      </button>
      <div>{state}</div>
    </div>
  );
}

We use the useTimeoutFn hook to create our timer to run a function after a given delay.

The delay is given in milliseconds in the 2nd argument.

We also created the cancelButtonClick function that uses the functions returned by useTimeoutFn .

cancel cancels the timer so the callback won’t run.

reset lets us reset the timer to start from the beginning.

isReady is a function that returns whether the callback is ready to run.

It’s ready if the callback hasn’t been called yet.

Conclusion

The react-use library comes with various useful hooks, including hooks that create timers and animate numbers.