useTrackedEffect

Shows which dependency indexes changed between runs.

Import

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

Live demo

Basic demo

Shows which dependency indexes changed between runs.

Left: 0 · Right: 0

Changed dependency indexes: none yet

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

export default function UseTrackedEffectDemo() {
  const [left, setLeft] = useState(0)
  const [right, setRight] = useState(0)
  const [changed, setChanged] = useState<number[]>([])

  useTrackedEffect((changes) => {
    setChanged(changes ?? [])
  }, [left, right])

  return (
    <div>
      <p><strong>Left:</strong> {left} · <strong>Right:</strong> {right}</p>
      <p><strong>Changed dependency indexes:</strong> {changed.join(', ') || 'none yet'}</p>
      <div class="demo-actions">
        <button type="button" onClick={() => setLeft((value) => value + 1)}>Change left</button>
        <button type="button" onClick={() => setRight((value) => value + 1)}>Change right</button>
      </div>
    </div>
  )
}

API

TypeScript signature

import type { DependencyList } from '../utils/types-compat.js';
type Effect<T extends DependencyList> = (changes?: number[], previousDeps?: T, currentDeps?: T) => void | (() => void);
declare const useTrackedEffect: <T extends DependencyList>(effect: Effect<T>, deps?: [...T]) => void;
export default useTrackedEffect;
/

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.