useUpdateEffect()

Runs an effect only on updates, skipping the initial mount. Ideal for side effects that should not execute when a component first renders, such as updating based on prop changes.

Import

import { useUpdateEffect } from "reactuals";

Demo

Loading...

Usage

import { useState } from "react";
import { useUpdateEffect } from "reactuals";

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

  useUpdateEffect(() => {
    console.log(`Count updated to: ${count}`);
  }, [count]);

  return (
    <div>
      <button
        onClick={() => setCount((c) => c + 1)}
        className="px-4 py-2 text-white bg-blue-500 rounded-lg"
      >
        Increment
      </button>
      <p className="mt-4">Count: {count}</p>
    </div>
  );
}