no-leaked-resize-observer

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

Features

🔍

Presets

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

What it does

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

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

Examples

Failing

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

Passing

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

What it does

Examples

Failing

Passing

Implementation

Further Reading

On this page