useRefEffect.md

useRefEffect

useRefEffect is a React hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes. This hook calls a cleanup function whenever the element changes to prevent memory leaks.

Interface

function useRefEffect<E extends HTMLElement>(
  callback: (element: E) => CleanupCallback | void,
  deps: DependencyList
): (element: E | null) => void;

Parameters

Return Value

Example

import { useRefEffect } from 'react-simplikit';

function Component() {
  const ref = useRefEffect<HTMLDivElement>(element => {
    console.log('Element mounted:', element);

    return () => {
      console.log('Element unmounted:', element);
    };
  }, []);

  return <div ref={ref}>Basic Example</div>;
}