useUpdateEffect

Like useEffect hook, but skip on first render.

---

API

useUpdateEffect(effect, deps);

https://react.dev/reference/react/useEffect

Options

• effect: EffectCallback(Required)
  • Effect callback just like in useEffect
• deps?: DependencyList
  • Dependency list just like in useEffect

Returns

No return

---

Examples

http://localhost:3000/

Count: 0

ℹ️ Check the console

JS

import { useUpdateEffect } from 'react-power-ups';

export function Demo() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((prev) => prev + 1);

  useEffect(() => {
    console.log('Hello from useEffect');
  }, [count]);

  useUpdateEffect(() => {
    // This only called when count updated
    console.log('Hello from useUpdateEffect');
  }, [count]);

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
}

TS

import { useUpdateEffect } from 'react-power-ups';

export function Demo() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((prev) => prev + 1);

  useEffect(() => {
    console.log('Hello from useEffect');
  }, [count]);

  useUpdateEffect(() => {
    // This only called when count updated
    console.log('Hello from useUpdateEffect');
  }, [count]);

  return (
    <>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </>
  );
}

---

Code: https://github.com/afiiif/react-power-ups/blob/main/src/use-update-effect.ts