docs(escape-hatches): mark lint-intentional example + suppress in sandbox (#8045)

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -41,7 +41,7 @@ export default function SidebarNav({
         'sticky top-0 lg:bottom-0 lg:h-[calc(100vh-4rem)] flex flex-col'
       )}>
       <div
-        className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark"
+        className="overflow-y-scroll no-bg-scrollbar lg:w-80 grow bg-wash dark:bg-wash-dark"
         style={{
           overscrollBehavior: 'contain',
         }}>

src/components/Layout/TopNav/TopNav.tsx

@@ -403,7 +403,7 @@ export default function TopNav({
         {isMenuOpen && (
           <div
             ref={scrollParentRef}
-            className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
+            className="overflow-y-scroll isolate no-bg-scrollbar lg:w-80 grow bg-wash dark:bg-wash-dark">
             <aside
               className={cn(
                 `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-40`,

src/content/learn/escape-hatches.md

@@ -31,28 +31,65 @@ const ref = useRef(0);
 
 Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! You can access the current value of that ref through the `ref.current` property.
 
+For example, this Effect depends on the `options` object which gets re-created every time you edit the input:
+
+> ⚠️ **Note (example intentionally shows a problematic pattern).**
+>
+> The code below purposely shows a case where an `options` object is recreated on every render to demonstrate why that would re-run an Effect. The sandbox linter will show an error for this example — that is expected. See the following section for a corrected version.
+
 <Sandpack>
 
 ```js
-import { useRef } from 'react';
+import { useState, useEffect } from 'react';
+import { createConnection } from './chat.js';
 
-export default function Counter() {
-  let ref = useRef(0);
+const serverUrl = 'https://localhost:1234';
 
-  function handleClick() {
-    ref.current = ref.current + 1;
-    alert('You clicked ' + ref.current + ' times!');
-  }
+function ChatRoom({ roomId }) {
+  const [message, setMessage] = useState('');
+
+  const options = {
+    serverUrl: serverUrl,
+    roomId: roomId
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const connection = createConnection(options);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [options]);
+
+  return (
+    <>
+      <h1>Welcome to the {roomId} room!</h1>
+      <input value={message} onChange={e => setMessage(e.target.value)} />
+    </>
+  );
+}
+</Sandpack>
 
+export default function App() {
+  const [roomId, setRoomId] = useState('general');
   return (
-    <button onClick={handleClick}>
-      Click me!
-    </button>
+    <>
+      <label>
+        Choose the chat room:{' '}
+        <select
+          value={roomId}
+          onChange={e => setRoomId(e.target.value)}
+        >
+          <option value="general">general</option>
+          <option value="travel">travel</option>
+          <option value="music">music</option>
+        </select>
+      </label>
+      <hr />
+      <ChatRoom roomId={roomId} />
+    </>
   );
 }
-```
 
-</Sandpack>
 
 A ref is like a secret pocket of your component that React doesn't track. For example, you can use refs to store [timeout IDs](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#return_value), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), and other objects that don't impact the component's rendering output.
 

src/content/reference/eslint-plugin-react-hooks/index.md

@@ -17,6 +17,15 @@ When the compiler reports a diagnostic, it means that the compiler was able to s
 What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
 </Note>
 
+<Note>
+**Clarification:**  
+As of `eslint-plugin-react-hooks@6.1.0`, the rules from `eslint-plugin-react-compiler` have **not** yet been merged into `eslint-plugin-react-hooks`.  
+You should continue to install and use both plugins separately if you rely on rules from each.  
+The React team has mentioned that a merge may happen in the future, but until then, this doc reflects the current state.
+</Note>
+
+
+## Available Lints {/*available-lints*/}
 ## Recommended Rules {/*recommended*/}
 
 These rules are included in the `recommended` preset `eslint-plugin-react-hooks`: