no-leaked-resize-observer

Enforces that every 'ResizeObserver' created in a component or custom hook has a corresponding 'ResizeObserver.disconnect()'.

Full Name in eslint-plugin-react-web-api

react-web-api/no-leaked-resize-observer

Full Name in @eslint-react/eslint-plugin

@eslint-react/web-api-no-leaked-resize-observer

Presets

web-api recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

Creating a ResizeObserver without disconnecting it can lead to memory leaks and unexpected behavior.

Common Violations

Invalid

import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(() => console.log("resize"));
    //         ^^^ A 'ResizeObserver' in 'useEffect' should have a corresponding 'resizeObserver.disconnect()' in its cleanup function.
    ro.observe(ref.current);
  }, []);

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

Valid

import React, { useEffect, useRef } from "react";

function MyComponent() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(() => console.log("resize"));
    ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);

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

no-leaked-resize-observer

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page