Top React Hooks — Update Hooks

Photo by Reproductive Health Supplies Coalition 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.

useUnmount

The useUnmount hook lets us call a function when the component will unmount.

For instance, we can use it by writing:

import React from "react";
import { useUnmount } from "react-use";
export default function App() {
  useUnmount(() => console.log("umounted"));
  return <div />;
}

The callback we pass into the hook is run when the component is unmounted.

useUpdateEffect

The useUpdateEffect hook lets us run code after the component is mounted.

The signature is the same as the useEffect hook.

For instance, we can write:

import React from "react";
import { useUpdateEffect } from "react-use";
export default function App() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {…