useDerivedState hook

use-derived-state.ts

import {
  useRef,
  useEffect,
  useState,
  Dispatch,
  SetStateAction,
} from 'react';

const noop = () => {
  return undefined;
};

const isEqual = <T>(a: T, b: T) => a === b;

export function useDerivedState<T>(
  prop: T,
  onChange: (newProp: T) => void = noop,
  predicate: (a: T, b: T) => boolean = isEqual
): [T, Dispatch<SetStateAction<T>>] {
  const [state, setState] = useState(() => prop);
  const prevProp = useRef(prop);
  const ref = useRef(state);

  const isPropChanged = !predicate(prevProp.current, prop);
  const isStateChanged = !predicate(ref.current, state);

  useEffect(() => {
    ref.current = state;

    if (!isPropChanged) {
      onChange(state);
    }
  }, [isPropChanged, state]);

  useEffect(() => {
    if (!isStateChanged && isPropChanged) {
      setState(prop);
    }

    prevProp.current = prop;
  }, [isStateChanged, isPropChanged, prop]);

  return [state, setState];
}