Top React Hooks — Promises, Tweens, and Manual Update

Photo by Sheri Hooley 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.

useTween

The useTween hook animates a number between 0 and 1.

For instance, we can use it by writing:

import React from "react";
import { useTween } from "react-use";
export default function App() {
  const t = useTween();
  return <div>Tween: {t}</div>;
}

We just call the useTween hook to return the number being animated.

We can also set the easing, duration, and delay before the animation starts.

To do that, we write:

import React from "react";
import { useTween } from "react-use";
export default function App() {
  const t = useTween("inCirc", 5000, 500);
  return <div>Tween: {t}</div>;
}

The first argument is the easing name.