docs: add more examples to web-api/no-leaked-event-listener docs (#1082)

Author: Rel1cx

VERSION

@@ -1 +1 @@
-1.48.3-next.1
+1.48.3-beta.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/monorepo",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "private": true,
   "description": "Monorepo for eslint-plugin-react-[x, dom, web-api, hooks-extra, naming-convention].",
   "keywords": [

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/core",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint utility module for static analysis of React core APIs and patterns.",
   "homepage": "https://github.com/Rel1cx/eslint-react",
   "bugs": {

packages/plugins/eslint-plugin-react-debug/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-debug",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint plugin for debugging related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-dom",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint plugin for React DOM related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-hooks-extra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-hooks-extra",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint plugin for React Hooks related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-naming-convention/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-naming-convention",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint plugin for naming convention related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-web-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-web-api",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "ESLint React's ESLint plugin for interacting with Web APIs",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md

@@ -253,6 +253,67 @@ function useCustomHook() {
 }
 ```
 
+### Failing
+
+The following cases are intentionally considered as possible leaks:
+
+```tsx
+import { useEffect } from "react";
+
+function MyComponent() {
+  useEffect(() => {
+    if (!el) {
+      return;
+    }
+
+    for (const [name, handler] of Object.entries(handlers)) {
+      //                          ^^^^^^^^^^^^^^^^^^^^^^^^^
+      //                          - The entries are not guaranteed to be the same as the ones in the effect cleanup function.
+      el.addEventListener(name, handler);
+    }
+
+    return () => {
+      for (const [name, handler] of Object.entries(handlers)) {
+        //                          ^^^^^^^^^^^^^^^^^^^^^^^^^
+        //                          - The entries are not guaranteed to be the same as the ones in the effect setup function.
+        el.removeEventListener(name, handler);
+      }
+    };
+  }, [el]);
+
+  return null;
+}
+```
+
+### Passing
+
+Instead, you should always use the same entries in both the setup and cleanup functions:
+
+```tsx
+import { useEffect } from "react";
+
+function MyComponent() {
+  useEffect(() => {
+    if (!el) {
+      return;
+    }
+
+    const handlerEntries = Object.entries(handlers); // <- Use the same entries array
+
+    for (const [name, handler] of handlerEntries) {
+      el.addEventListener(name, handler);
+    }
+
+    return () => {
+      for (const [name, handler] of handlerEntries) {
+        el.removeEventListener(name, handler);
+      }
+    };
+  }, [el]);
+  return null;
+}
+```
+
 ## Implementation
 
 - [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts)

packages/plugins/eslint-plugin-react-x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-x",
-  "version": "1.48.3-next.1",
+  "version": "1.48.3-beta.1",
   "description": "A set of composable ESLint rules for for libraries and frameworks that use React as a UI runtime.",
   "keywords": [
     "react",