Angular Directive in a React Hook

useAttributeObserver.ts

"use client";

import { useEffect, useState } from "react";

export interface ObservedElement {
  el: HTMLElement;
  value: string;
}

export function useAttributeObserver(attr: string) {
  const [elements, setElements] = useState<ObservedElement[]>([]);

  useEffect(() => {
    const updateElements = () => {
      const found: ObservedElement[] = [];
      document.querySelectorAll<HTMLElement>(`[${attr}]`).forEach((el) => {
        const value = el.getAttribute(attr);
        if (value) {
          found.push({ el, value });
        }
      });
      setElements(found);
    };

    const observer = new MutationObserver(() => updateElements());
    observer.observe(document.body, {
      attributes: true,
      childList: true,
      subtree: true,
    });

    updateElements();

    return () => observer.disconnect();
  }, [attr]);

  return elements;
}

E esse WeakSet dando bobeira aí? 🤪 Tu ia fazer um observer persistente do estado geral dos elementos?