useDeepCompareEffect

Category

Lifecycle

Export Size

537 B

Last Changed

5 days ago

useEffect whose dependency comparison is deep.

Demo

Usage

import { useDeepCompareEffect } from '@reause/shared'
import { useState } from 'react'

function Demo() {
  const [count, setCount] = useState(0)
  // rebuilt on every render — a new reference, equal contents until `count` changes
  const options = { id: count, tags: ['a', 'b'] }

  useDeepCompareEffect(() => {
    // runs on mount and whenever `options` deep-changes — not on every re-render
    console.log('options changed', options)
    return () => console.log('cleanup')
  }, [options])

  return <button onClick={() => setCount(count + 1)}>increment</button>
}

Type Declarations

export function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void

Source

Source · Demo · react-use

Contributors

Changelog

v0.1.6 on

1a682 - fix(shared): keep useDeepCompareEffect's dev warning gate verbatim (#921)

a9f7f - feat(shared): add useDeepCompareEffect (#921)