import { useEffect, useRef } from "react"

/**
 * Similar to useUpdateEffect but is more strict on running the effect only when the value changes.
 */
export function useOnChange<T>(
  value: T,
  onChange: () => void,
  onUnmount?: () => void,
) {
  const previousValue = useRef(value)

  useEffect(() => {
    if (previousValue.current !== value) {
      onChange()
      previousValue.current = value
    }
  }, [value, onChange])

  useEffect(() => {
    return () => {
      onUnmount?.()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
}