useRefEffect

useRefEffect is a custom 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(
  callback: (element: Element) => CleanupCallback | void,
  deps: DependencyList
): (element: Element | null) => void;

Parameters

• callbackrequired · (element: Element) => CleanupCallback | void
  

  A callback function that is executed when the element is set. This function can return a cleanup function.

• depsrequired · DependencyList
  

  An array of dependencies that define when the callback should be re-executed. The callback is re-executed whenever the deps change.

Return Value

• (element: Element | null) => void
  

  function to set the element. Pass this function to the ref attribute, and the callback will be called whenever the element changes.

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>;
}