<andres-carmona />

TIL #9: ownerDocument.defaultView
First published on
on html, javascript, typescript

Aunque me considero un programador con experiencia y llevo mas de 15 anos desarrollando, me sorprendio no conocer la propiedad ownerDocument.defaultView.

Basicamente devuelve el objeto window (o null) asociado a un nodo DOM especifico.

Se puede usar para adjuntar listeners de forma segura al window correcto desde un componente que se renderiza fuera de la ventana principal (por ejemplo, usando portales).

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  const ref = useRef(null);

  useEffect(() => {
    const win = ref.current?.ownerDocument.defaultView || window;

    const toggle = (e) => {
      if (e.metaKey && e.key === "d") {
        e.preventDefault();
        setTheme((t) => (t === "dark" ? "light" : "dark"));
      }
    };

    win.addEventListener("keydown", toggle);

    return () => win.removeEventListener("keydown", toggle);
  }, []);

  return (
    <div ref={ref} className={theme}>
      {children}
    </div>
  );
}

Del mismo articulo tambien aprendi sobre useId y cache.

Referencia: https://shud.in/thoughts/build-bulletproof-react-components, gran articulo.