useDeepState - React useState hook that uses fast-deep-equal to avoid unnecessary state changes

use-deep-state.ts

import React from "react";
import deepEqual from "fast-deep-equal";

export function useDeepState<S>(
  initialState: S | (() => S),
): [S, React.Dispatch<React.SetStateAction<S>>] {
  const [value, setValue] = React.useState(initialState);
  const deepSetValue: React.Dispatch<React.SetStateAction<S>> =
    React.useCallback((action) => {
      setValue((prevValue) => {
        const newValue: S =
          typeof action === "function"
            ? (action as (prevValue: S) => S)(prevValue)
            : action;
        return deepEqual(prevValue, newValue) ? prevValue : newValue;
      });
    }, []);

  return [value, deepSetValue];
}