}
@@ -11465,6 +11465,14 @@ _For more background on how we built View Transitions, see: [#31975](https://git
## Activity {/*activity*/}
+
-
{catList.map((cat) => (
- {
const map = getMap();
map.set(cat, node);
@@ -263,7 +263,7 @@ export default function CatFriends() {
};
}}
>
-
+
))}
Here is the message: {messageContent}
; +} + +export function MessageContainer({ messagePromise }) { + return ( +Error occurred
;
+ }
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Using error boundary
+function Parent() {
+ return (
+ {data}
;
+ } catch (error) {
+ return Failed to load
; // Unreachable
+ }
+}
+
+// ✅ Error boundary catches `use` errors
+function App() {
+ return (
+ Count: {renderCount}
;
+}
+
+// ❌ Modifying window properties
+function Component({userId}) {
+ window.currentUser = userId; // Global mutation
+ return User: {userId}
;
+}
+
+// ❌ Global array push
+const events = [];
+function Component({event}) {
+ events.push(event); // Mutating global array
+ return Events: {events.length}
;
+}
+
+// ❌ Cache manipulation
+const cache = {};
+function Component({id}) {
+ if (!cache[id]) {
+ cache[id] = fetchData(id); // Modifying cache during render
+ }
+ return {cache[id]}
;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Use state for counters
+function Component() {
+ const [clickCount, setClickCount] = useState(0);
+
+ const handleClick = () => {
+ setClickCount(c => c + 1);
+ };
+
+ return (
+
+ );
+}
+
+// ✅ Use context for global values
+function Component() {
+ const user = useContext(UserContext);
+ return User: {user.id}
;
+}
+
+// ✅ Synchronize external state with React
+function Component({title}) {
+ useEffect(() => {
+ document.title = title; // OK in effect
+ }, [title]);
+
+ return Page: {title}
;
+}
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
new file mode 100644
index 000000000..9376271eb
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
@@ -0,0 +1,170 @@
+---
+title: immutability
+version: rc
+---
+
+-
+ {todos.map(todo =>
- {todo.text} )} +
-
+ {todos.map(todo =>
- {todo.text} )} +
Name: {name}
; // UI appears "frozen"
+}
+```
+
+React Compiler automatically memoizes values following the Rules of React. If something breaks with manual `useMemo`, it will also break the compiler's automatic optimization. This rule helps identify these problematic patterns.
+
+
+ updateField('name', e.target.value)}
+ />
+
+ );
+}
+```
+
+{greeting}
+{value}
;
+}
+
+// ❌ TanStack Table `useReactTable`
+function Component({data}) {
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+ // table instance uses interior mutability
+ return Current value: {watchedValue}
+
+ );
+}
+```
+
+Some other libraries do not yet have alternative APIs that are compatible with React's memoization model. If the linter doesn't automatically skip over your components or hooks that call these APIs, please [file an issue](https://github.com/facebook/react/issues) so we can add it to the linter.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
new file mode 100644
index 000000000..2f296ac56
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
@@ -0,0 +1,102 @@
+---
+title: preserve-manual-memoization
+version: rc
+---
+
+Content
;
+}
+
+// ❌ Date.now() for values
+function Component() {
+ const timestamp = Date.now(); // Changes every render
+ return Created at: {timestamp}
;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Stable IDs from initial state
+function Component() {
+ const [id] = useState(() => crypto.randomUUID());
+ return Content
;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to show the current time {/*current-time*/}
+
+Calling `Date.now()` during render makes your component impure:
+
+```js {expectedErrors: {'react-compiler': [3]}}
+// ❌ Wrong: Time changes every render
+function Clock() {
+ return Current time: {Date.now()}
;
+}
+```
+
+Instead, [move the impure function outside of render](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent):
+
+```js
+function Clock() {
+ const [time, setTime] = useState(() => Date.now());
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTime(Date.now());
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return Current time: {time}
;
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
new file mode 100644
index 000000000..78776ba57
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
@@ -0,0 +1,124 @@
+---
+title: refs
+version: rc
+---
+
+{value}
;
+}
+
+// ❌ Modifying ref during render
+function Component({value}) {
+ const ref = useRef(null);
+ ref.current = value; // Don't modify during render
+ return ;
+}
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Read ref in effects/handlers
+function Component() {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ if (ref.current) {
+ console.log(ref.current.offsetWidth); // OK in effect
+ }
+ });
+
+ return ;
+}
+
+// ✅ Use state for UI values
+function Component() {
+ const [count, setCount] = useState(0);
+
+ return (
+
+ );
+}
+
+// ✅ Lazy initialization of ref value
+function Component() {
+ const ref = useRef(null);
+
+ // Initialize only once on first use
+ if (ref.current === null) {
+ ref.current = expensiveComputation(); // OK - lazy initialization
+ }
+
+ const handleClick = () => {
+ console.log(ref.current); // Use the initialized value
+ };
+
+ return ;
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### The lint flagged my plain object with `.current` {/*plain-object-current*/}
+
+The name heuristic intentionally treats `ref.current` and `fooRef.current` as real refs. If you're modeling a custom container object, pick a different name (for example, `box`) or move the mutable value into state. Renaming avoids the lint because the compiler stops inferring it as a ref.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md
new file mode 100644
index 000000000..6508fc867
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md
@@ -0,0 +1,161 @@
+---
+title: rules-of-hooks
+---
+
+