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().

Why is this bad?

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

Examples

Failing

import React, { useEffect, useRef } from 'react';
 
function Example() {
  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 Example() {
  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} />;
}