Rules
no-leaked-resize-observer
Full Name in eslint-plugin-react-web-api
react-web-api/no-leaked-resize-observerFull Name in @eslint-react/eslint-plugin
@eslint-react/web-api/no-leaked-resize-observerPresets
web-apirecommendedrecommended-typescriptrecommended-type-checked
Description
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} />;
}