UseMutationObserver

1'use client';
2 
3import { useCallback, useEffect, useRef } from 'react';
4 
5// Types
6type UseMutationObserverProps<T extends HTMLElement = HTMLElement> = {
7  target: React.RefObject<T | null>;
8  options?: MutationObserverInit;
9  callback: MutationCallback;
10};
11 
12export function useMutationObserver<T extends HTMLElement = HTMLElement>({
13  target,
14  options = {
15    attributes: true,
16    childList: true,
17    subtree: true,
18  },
19  callback,
20}: UseMutationObserverProps<T>) {
21  const observerRef = useRef<MutationObserver | null>(null);
22  const prevTargetRef = useRef<T | null>(null);
23 
24  const disconnect = useCallback(() => {
25    if (observerRef.current) {
26      observerRef.current.disconnect();
27      observerRef.current = null;
28    }
29  }, []);
30 
31  useEffect(() => {
32    const node = target.current;
33    if (!node) return;
34 
35    if (prevTargetRef.current !== node) {
36      disconnect();
37      prevTargetRef.current = node;
38    }
39 
40    observerRef.current = new MutationObserver(callback);
41    observerRef.current.observe(node, options);
42    return () => {
43      disconnect();
44    };
45  }, [target, options, callback, disconnect]);
46 
47  return {
48    disconnect,
49  };
50}