React | usePrevious hook

usePrevious.ts

/**
 * inspired by
 * @see https://codesandbox.io/s/use-previous-hook-persistent-with-matcher-hujqez?file=/src/hooks.tsx:0-1069
 * @see https://www.developerway.com/posts/implementing-advanced-use-previous-hook
 * @see https://usehooks.com/usePrevious/
 */
import { useRef, useEffect } from 'react'

export const usePrevious = <TValue>(value: TValue) => {
  const ref = useRef<TValue>()

  useEffect(() => {
    ref.current = value
  }, [value])

  // Return previous value (happens before update in useEffect above)
  return ref.current
}

export const usePreviousPersistent = <TValue>(value: TValue) => {
  const ref = useRef<{ value: TValue; prev: TValue | null }>({
    value,
    prev: null,
  })

  const current = ref.current.value

  if (value !== current) {
    ref.current = {
      value,
      prev: current,
    }
  }

  return ref.current.prev
}

export const usePreviousPersistentWithMatcher = <TValue>(
  value: TValue,
  isEqualFunc: (prev: TValue, next: TValue) => boolean,
) => {
  const ref = useRef<{ value: TValue; prev: TValue | null }>({
    value,
    prev: null,
  })

  const current = ref.current.value

  if (isEqualFunc ? !isEqualFunc(current, value) : value !== current) {
    ref.current = {
      value,
      prev: current,
    }
  }

  return ref.current.prev
}