Skip to main content

​
Usage

Runs an effect only after the first render has completed. If dependencies is provided, the effect runs only when one of those values changes between updates. If dependencies is omitted, the effect runs on every update render. 
import { useDidUpdate } from '@kuzenbo/hooks';
import { useState } from 'react';

function Demo() {
  const [count, setCount] = useState(0);

  useDidUpdate(() => {
    console.log('Count updated:', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

​
Run on every update

Omit the dependencies array to run the effect on every update: 
import { useDidUpdate } from '@kuzenbo/hooks';
import { useState } from 'react';

function Demo() {
  const [value, setValue] = useState('');

  useDidUpdate(() => {
    console.log('Component updated');
  });

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

​
Definition

function useDidUpdate(
  fn: EffectCallback,
  dependencies?: DependencyList
): void

​
Parameters

​
fn
EffectCallback
Effect callback to execute after mount
​
dependencies
DependencyList
Optional dependency list used to detect update changes

Build docs developers (and LLMs) love

Get started for freeTalk to us