useAdvancedEffect

useAdvancedEffect is a custom React hook that works like useEffect but skips the first render and runs the effect only when its dependencies actually change.

Usage

import { useState } from "react";
import { useAdvancedEffect } from "hookify-react";

export default function UseAdvancedEffectExample() {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);

  useAdvancedEffect(() => {
    console.log("Effect triggered:", count);

    return () => {
      console.log("Cleanup for:", count);
    };
  }, [count]);

  return (
    <div style={{ textAlign: "center", fontFamily: "Arial, sans-serif" }}>
      <h2>useAdvancedEffect Hook Example</h2>
      <p>Count: <strong>{count}</strong></p>
      <p>Other count: <strong>{otherCount}</strong></p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setOtherCount((prev) => prev + 1)}>
        Increment other count
      </button>
      <p>Check the console for effect triggers.</p>
    </div>
  );
}

API Reference

Parameters

Parameter	Type	Default	Description
effect	EffectCallback	—	The effect function to execute when dependencies change. May return a cleanup function, just like useEffect.
deps	DependencyList	—	The array of dependencies that determine when the effect runs.

Return Value

Property	Type	Description
—	void	useAdvancedEffect does not return a value.

Behavior

• Skips execution on the initial (first) render.
• Runs the effect only when the dependencies actually change between renders, compared per-element with Object.is.
• Treats a change in the length of the dependency list as a change.
• Prevents unnecessary re-executions when dependencies are referentially different but equal.
• Supports returning a cleanup function from the effect, exactly like useEffect.