useDeepCompareLayoutEffect

Layout-effect variant of useDeepCompareEffect.

Import

import { useDeepCompareLayoutEffect } from '@kamod-ch/hooks'

Live demo

Basic demo

Layout-effect variant of useDeepCompareEffect.

Unrelated count: 0

Layout effect runs: 0

import { useState } from 'preact/hooks'
import { useDeepCompareLayoutEffect } from '@kamod-ch/hooks'

export default function UseDeepCompareLayoutEffectDemo() {
  const [count, setCount] = useState(0)
  const [runs, setRuns] = useState(0)
  const config = { dense: true, columns: ['name', 'status'] }

  useDeepCompareLayoutEffect(() => {
    setRuns((value) => value + 1)
  }, [config])

  return (
    <div>
      <p><strong>Unrelated count:</strong> {count}</p>
      <p><strong>Layout effect runs:</strong> {runs}</p>
      <button type="button" onClick={() => setCount((value) => value + 1)}>Re-render with deep-equal deps</button>
    </div>
  )
}

API

TypeScript signature

import { useLayoutEffect } from 'preact/hooks';
declare const _default: typeof import("preact/hooks").useEffect | typeof useLayoutEffect;
export default _default;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.