Top React Hooks — Side Effects and Shared Data

Photo by Mert Kahveci 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.

useCustomCompareEffect

We can use the useCustomCompareEffect hook to let us run a callback after comparing the previous and current value our way.

For instance, we can write:

import React from "react";
import { useCustomCompareEffect, useCounter } from "react-use";
import isEqual from "lodash/isEqual";
export default function App() {
  const [count, { inc }] = useCounter(0);
  const [options, setOptions] = React.useState({ step: 5 });
  useCustomCompareEffect(
    () => {
      inc(options.step);
    },
    [options],
    (prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
  );
  return (
    <div>
      <button onClick={() => setOptions(({ step }) => ({ step: step + 1 }))}>
        increment
      </button>
      <p>{count}</p>
    </div>
  );
}

The useCustomCompareEffect hook takes the 3rd argument with a function to compare…