Top React Hooks — Memoization and Previous Value

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.

createMemo

The createMemo function creates a hook that has the state memoized.

Ir takes a function that returns a state.

For instance, we can write:

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

const product = n => {
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
};

const useMemoProduct = createMemo(product);

export default function App() {
  const result = useMemoProduct(9);

  return <div>{result}</div>;
}

We have the product function which returns the product of n numbers multiplied together.

And we pass that into the createMemo function to return the useMemoProduct hook.

The hook takes the same arguments as the product function.

The hook returns the result which is the same as the product function.

Then we render the result in App .

useGetSetState

The useGetSetState hook lets us get and set the state, where the state may be an object.

To use it, we can write:

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

export default function App() {
  const [get, setState] = useGetSetState({ count: 0 });
  const onClick = () => {
    setState({ count: get().count + 1 });
  };

  return <button onClick={onClick}>Clicked: {get().count}</button>;
}

We call the useGetSetState with an argument being the initial value.

It returns the get function to get the state value.

The setState the function sets the state.

Then we can call get to get the count property’s value.

usePrevious

We can get the previous value of a state with the usePrevious hook.

For instance, we can write:

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

export default function App() {
  const [count, setCount] = React.useState(0);
  const prevCount = usePrevious(count);

  return (
    <p>
      <button onClick={() => setCount(count + 1)}>increment</button>
      <button onClick={() => setCount(count - 1)}>decrement</button>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </p>
  );
}

We use the useState hook to return a state getter and setter function.

Then we pass the state into the usePrevious hook.

And then we get the current and previous value of count with count and prevCount respectively.

usePreviousDistinct

The usePreviousDistinct hook is like usePrevious , but the value updates only when the value actually changes.

This lets us get the previous distinct value instead of the previous value.

For instance, we can write:

import React from "react";
import { usePreviousDistinct, useCounter } from "react-use";

export default function App() {
  const [count, { inc: relatedInc }] = useCounter(0);
  const [anotherCount, { inc }] = useCounter(0);
  const prevCount = usePreviousDistinct(count);

  return (
    <p>
      Count: {count}, before count: {prevCount}
      <button onClick={() => relatedInc()}>Increment</button>
      Another count: {anotherCount}
      <button onClick={() => inc()}>Increment Unrelated</button>
    </p>
  );
}

We created 2 number states, count and anotherCount .

Then we use the increment functions that are returned with them.

And we pass the count into the usePreviousDistinct hook.

Conclusion

The react-use library lets us memoize results, get the previous value, and more with its hooks.