use-deep-compare-layout-effect

1import { dequal } from 'dequal'
2import { useLayoutEffect, useRef } from 'react'
3import type { DependencyList, EffectCallback } from 'react'
4 
5export function useDeepCompareLayoutEffect(
6  effect: EffectCallback,
7  deps: DependencyList,
8) {
9  const ref = useRef<DependencyList>(deps)
10 
11  if (!ref.current || !dequal(ref.current, deps)) {
12    ref.current = deps
13  }
14 
15  useLayoutEffect(effect, ref.current)
16}