{prevRoute?.path ? (
(
{nextRoute?.path ? (
+
+Validates that dependency arrays for React hooks contain all necessary dependencies.
+
+
+
+## Rule Details {/*rule-details*/}
+
+React hooks like `useEffect`, `useMemo`, and `useCallback` accept dependency arrays. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes. This causes stale closures where the hook uses outdated values.
+
+## Common Violations {/*common-violations*/}
+
+This error often happens when you try to "trick" React about dependencies to control when an effect runs. Effects should synchronize your component with external systems. The dependency array tells React which values the effect uses, so React knows when to re-synchronize.
+
+If you find yourself fighting with the linter, you likely need to restructure your code. See [Removing Effect Dependencies](/learn/removing-effect-dependencies) to learn how.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing dependency
+useEffect(() => {
+ console.log(count);
+}, []); // Missing 'count'
+
+// ❌ Missing prop
+useEffect(() => {
+ fetchUser(userId);
+}, []); // Missing 'userId'
+
+// ❌ Incomplete dependencies
+useMemo(() => {
+ return items.sort(sortOrder);
+}, [items]); // Missing 'sortOrder'
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ All dependencies included
+useEffect(() => {
+ console.log(count);
+}, [count]);
+
+// ✅ All dependencies included
+useEffect(() => {
+ fetchUser(userId);
+}, [userId]);
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Adding a function dependency causes infinite loops {/*function-dependency-loops*/}
+
+You have an effect, but you're creating a new function on every render:
+
+```js
+// ❌ Causes infinite loop
+const logItems = () => {
+ console.log(items);
+};
+
+useEffect(() => {
+ logItems();
+}, [logItems]); // Infinite loop!
+```
+
+In most cases, you don't need the effect. Call the function where the action happens instead:
+
+```js
+// ✅ Call it from the event handler
+const logItems = () => {
+ console.log(items);
+};
+
+return ;
+
+// ✅ Or derive during render if there's no side effect
+items.forEach(item => {
+ console.log(item);
+});
+```
+
+If you genuinely need the effect (for example, to subscribe to something external), make the dependency stable:
+
+```js
+// ✅ useCallback keeps the function reference stable
+const logItems = useCallback(() => {
+ console.log(items);
+}, [items]);
+
+useEffect(() => {
+ logItems();
+}, [logItems]);
+
+// ✅ Or move the logic straight into the effect
+useEffect(() => {
+ console.log(items);
+}, [items]);
+```
+
+### Running an effect only once {/*effect-on-mount*/}
+
+You want to run an effect once on mount, but the linter complains about missing dependencies:
+
+```js
+// ❌ Missing dependency
+useEffect(() => {
+ sendAnalytics(userId);
+}, []); // Missing 'userId'
+```
+
+Either include the dependency (recommended) or use a ref if you truly need to run once:
+
+```js
+// ✅ Include dependency
+useEffect(() => {
+ sendAnalytics(userId);
+}, [userId]);
+
+// ✅ Or use a ref guard inside an effect
+const sent = useRef(false);
+
+useEffect(() => {
+ if (sent.current) {
+ return;
+ }
+
+ sent.current = true;
+ sendAnalytics(userId);
+}, [userId]);
+```
+
+## Options {/*options*/}
+
+This rule accepts an options object:
+
+```js
+{
+ "rules": {
+ "react-hooks/exhaustive-deps": ["warn", {
+ "additionalHooks": "(useMyCustomHook|useAnotherHook)"
+ }]
+ }
+}
+```
+
+- `additionalHooks`: Regex for hooks that should be checked for exhaustive dependencies
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
new file mode 100644
index 0000000000..3bd662a86e
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
@@ -0,0 +1,72 @@
+---
+title: gating
+---
+
+
+
+Validates configuration of [gating mode](/reference/react-compiler/gating).
+
+
+
+## Rule Details {/*rule-details*/}
+
+Gating mode lets you gradually adopt React Compiler by marking specific components for optimization. This rule ensures your gating configuration is valid so the compiler knows which components to process.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing required fields
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ gating: {
+ importSpecifierName: '__experimental_useCompiler'
+ // Missing 'source' field
+ }
+ }]
+ ]
+};
+
+// ❌ Invalid gating type
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ gating: '__experimental_useCompiler' // Should be object
+ }]
+ ]
+};
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Complete gating configuration
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ gating: {
+ importSpecifierName: 'isCompilerEnabled', // exported function name
+ source: 'featureFlags' // module name
+ }
+ }]
+ ]
+};
+
+// featureFlags.js
+export function isCompilerEnabled() {
+ // ...
+}
+
+// ✅ No gating (compile everything)
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ // No gating field - compiles all components
+ }]
+ ]
+};
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
new file mode 100644
index 0000000000..fe0cbe0080
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
@@ -0,0 +1,84 @@
+---
+title: globals
+---
+
+
+
+Validates against assignment/mutation of globals during render, part of ensuring that [side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render).
+
+
+
+## Rule Details {/*rule-details*/}
+
+Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently in development vs production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Global counter
+let renderCount = 0;
+function Component() {
+ renderCount++; // Mutating global
+ return
+
+Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable).
+
+
+
+## Rule Details {/*rule-details*/}
+
+A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
+
+## Common Violations {/*common-violations*/}
+
+### Invalid {/*invalid*/}
+
+```js
+// ❌ Array push mutation
+function Component() {
+ const [items, setItems] = useState([1, 2, 3]);
+
+ const addItem = () => {
+ items.push(4); // Mutating!
+ setItems(items); // Same reference, no re-render
+ };
+}
+
+// ❌ Object property assignment
+function Component() {
+ const [user, setUser] = useState({name: 'Alice'});
+
+ const updateName = () => {
+ user.name = 'Bob'; // Mutating!
+ setUser(user); // Same reference
+ };
+}
+
+// ❌ Sort without spreading
+function Component() {
+ const [items, setItems] = useState([3, 1, 2]);
+
+ const sortItems = () => {
+ setItems(items.sort()); // sort mutates!
+ };
+}
+```
+
+### Valid {/*valid*/}
+
+```js
+// ✅ Create new array
+function Component() {
+ const [items, setItems] = useState([1, 2, 3]);
+
+ const addItem = () => {
+ setItems([...items, 4]); // New array
+ };
+}
+
+// ✅ Create new object
+function Component() {
+ const [user, setUser] = useState({name: 'Alice'});
+
+ const updateName = () => {
+ setUser({...user, name: 'Bob'}); // New object
+ };
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I need to add items to an array {/*add-items-array*/}
+
+Mutating arrays with methods like `push()` won't trigger re-renders:
+
+```js
+// ❌ Wrong: Mutating the array
+function TodoList() {
+ const [todos, setTodos] = useState([]);
+
+ const addTodo = (id, text) => {
+ todos.push({id, text});
+ setTodos(todos); // Same array reference!
+ };
+
+ return (
+
+
+Validates against usage of libraries which are incompatible with memoization (manual or automatic).
+
+
+
+
+
+These libraries were designed before React's memoization rules were fully documented. They made the correct choices at the time to optimize for ergonomic ways to keep components just the right amount of reactive as app state changes. While these legacy patterns worked, we have since discovered that it's incompatible with React's programming model. We will continue working with library authors to migrate these libraries to use patterns that follow the Rules of React.
+
+
+
+## Rule Details {/*rule-details*/}
+
+Some libraries use patterns that aren't supported by React. When the linter detects usages of these APIs from a [known list](https://github.com/facebook/react/blob/main/compiler/packages/babel-plugin-react-compiler/src/HIR/DefaultModuleTypeProvider.ts), it flags them under this rule. This means that React Compiler can automatically skip over components that use these incompatible APIs, in order to avoid breaking your app.
+
+```js
+// Example of how memoization breaks with these libraries
+function Form() {
+ const { watch } = useForm();
+
+ // ❌ This value will never update, even when 'name' field changes
+ const name = useMemo(() => watch('name'), [watch]);
+
+ return
+
+#### Designing APIs that follow the Rules of React {/*designing-apis-that-follow-the-rules-of-react*/}
+
+One question to think about when designing a library API or hook is whether calling the API can be safely memoized with `useMemo`. If it can't, then both manual and React Compiler memoizations will break your user's code.
+
+For example, one such incompatible pattern is "interior mutability". Interior mutability is when an object or function keeps its own hidden state that changes over time, even though the reference to it stays the same. Think of it like a box that looks the same on the outside but secretly rearranges its contents. React can't tell anything changed because it only checks if you gave it a different box, not what's inside. This breaks memoization, since React relies on the outer object (or function) changing if part of its value has changed.
+
+As a rule of thumb, when designing React APIs, think about whether `useMemo` would break it:
+
+```js
+function Component() {
+ const { someFunction } = useLibrary();
+ // it should always be safe to memoize functions like this
+ const result = useMemo(() => someFunction(), [someFunction]);
+}
+```
+
+Instead, design APIs that return immutable state and use explicit update functions:
+
+```js
+// ✅ Good: Return immutable state that changes reference when updated
+function Component() {
+ const { field, updateField } = useLibrary();
+ // this is always safe to memo
+ const greeting = useMemo(() => `Hello, ${field.name}!`, [field.name]);
+
+ return (
+
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ react-hook-form `watch`
+function Component() {
+ const {watch} = useForm();
+ const value = watch('field'); // Interior mutability
+ return
;
+}
+```
+
+
+
+#### MobX {/*mobx*/}
+
+MobX patterns like `observer` also break memoization assumptions, but the linter does not yet detect them. If you rely on MobX and find that your app doesn't work with React Compiler, you may need to use the `"use no memo" directive`.
+
+```js
+// ❌ MobX `observer`
+const Component = observer(() => {
+ const [timer] = useState(() => new Timer());
+ return Seconds passed: {timer.secondsPassed};
+});
+```
+
+
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ For react-hook-form, use `useWatch`:
+function Component() {
+ const {register, control} = useForm();
+ const watchedValue = useWatch({
+ control,
+ name: 'field'
+ });
+
+ return (
+ <>
+
+
+
+Validates that existing manual memoization is preserved by the compiler. React Compiler will only compile components and hooks if its inference [matches or exceeds the existing manual memoization](/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo).
+
+
+
+## Rule Details {/*rule-details*/}
+
+React Compiler preserves your existing `useMemo`, `useCallback`, and `React.memo` calls. If you've manually memoized something, the compiler assumes you had a good reason and won't remove it. However, incomplete dependencies prevent the compiler from understanding your code's data flow and applying further optimizations.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Missing dependencies in useMemo
+function Component({ data, filter }) {
+ const filtered = useMemo(
+ () => data.filter(filter),
+ [data] // Missing 'filter' dependency
+ );
+
+ return
+
+Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions.
+
+
+
+## Rule Details {/*rule-details*/}
+
+React components must be pure functions - given the same props, they should always return the same JSX. When components use functions like `Math.random()` or `Date.now()` during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior.
+
+## Common Violations {/*common-violations*/}
+
+In general, any API that returns a different value for the same inputs violates this rule. Usual examples include:
+
+- `Math.random()`
+- `Date.now()` / `new Date()`
+- `crypto.randomUUID()`
+- `performance.now()`
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Math.random() in render
+function Component() {
+ const id = Math.random(); // Different every render
+ return
+
+Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](/reference/react/useRef#usage).
+
+
+
+## Rule Details {/*rule-details*/}
+
+Refs hold values that aren't used for rendering. Unlike state, changing a ref doesn't trigger a re-render. Reading or writing `ref.current` during render breaks React's expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent.
+
+## How It Detects Refs {/*how-it-detects-refs*/}
+
+The lint only applies these rules to values it knows are refs. A value is inferred as a ref when the compiler sees any of the following patterns:
+
+- Returned from `useRef()` or `React.createRef()`.
+
+ ```js
+ const scrollRef = useRef(null);
+ ```
+
+- An identifier named `ref` or ending in `Ref` that reads from or writes to `.current`.
+
+ ```js
+ buttonRef.current = node;
+ ```
+
+- Passed through a JSX `ref` prop (for example ``).
+
+ ```jsx
+
+ ```
+
+Once something is marked as a ref, that inference follows the value through assignments, destructuring, or helper calls. This lets the lint surface violations even when `ref.current` is accessed inside another function that received the ref as an argument.
+
+## Common Violations {/*common-violations*/}
+
+- Reading `ref.current` during render
+- Updating `refs` during render
+- Using `refs` for values that should be state
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Reading ref during render
+function Component() {
+ const ref = useRef(0);
+ const value = ref.current; // Don't read during render
+ return
+
+Validates that components and hooks follow the [Rules of Hooks](/reference/rules/rules-of-hooks).
+
+
+
+## Rule Details {/*rule-details*/}
+
+React relies on the order in which hooks are called to correctly preserve state between renders. Each time your component renders, React expects the exact same hooks to be called in the exact same order. When hooks are called conditionally or in loops, React loses track of which state corresponds to which hook call, leading to bugs like state mismatches and "Rendered fewer/more hooks than expected" errors.
+
+## Common Violations {/*common-violations*/}
+
+These patterns violate the Rules of Hooks:
+
+- **Hooks in conditions** (`if`/`else`, ternary, `&&`/`||`)
+- **Hooks in loops** (`for`, `while`, `do-while`)
+- **Hooks after early returns**
+- **Hooks in callbacks/event handlers**
+- **Hooks in async functions**
+- **Hooks in class methods**
+- **Hooks at module level**
+
+
+
+### `use` hook {/*use-hook*/}
+
+The `use` hook is different from other React hooks. You can call it conditionally and in loops:
+
+```js
+// ✅ `use` can be conditional
+if (shouldFetch) {
+ const data = use(fetchPromise);
+}
+
+// ✅ `use` can be in loops
+for (const promise of promises) {
+ results.push(use(promise));
+}
+```
+
+However, `use` still has restrictions:
+- Can't be wrapped in try/catch
+- Must be called inside a component or hook
+
+Learn more: [`use` API Reference](/reference/react/use)
+
+
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Hook in condition
+if (isLoggedIn) {
+ const [user, setUser] = useState(null);
+}
+
+// ❌ Hook after early return
+if (!data) return
- {type}
+ {type === 'Previous' ? 'Previous' : 'Next'}
{title}
diff --git a/src/components/ErrorDecoderContext.tsx b/src/components/ErrorDecoderContext.tsx
index 080969efe9..77e9ebf7d5 100644
--- a/src/components/ErrorDecoderContext.tsx
+++ b/src/components/ErrorDecoderContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
// Error Decoder requires reading pregenerated error message from getStaticProps,
// but MDX component doesn't support props. So we use React Context to populate
// the value without prop-drilling.
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 13fe6d3a90..ccd91fe9c4 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx
index 61e4e52cd6..2d0b9fecdc 100644
--- a/src/components/Icon/IconArrow.tsx
+++ b/src/components/Icon/IconArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx
index 4a3d3ad02f..81301c0475 100644
--- a/src/components/Icon/IconArrowSmall.tsx
+++ b/src/components/Icon/IconArrowSmall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -19,6 +26,7 @@ export const IconArrowSmall = memo<
const classes = cn(className, {
'rotate-180': displayDirection === 'left',
'rotate-180 rtl:rotate-0': displayDirection === 'start',
+ 'rtl:rotate-180': displayDirection === 'end',
'rotate-90': displayDirection === 'down',
});
return (
diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx
index 5d461556fb..ec930923d3 100644
--- a/src/components/Icon/IconBsky.tsx
+++ b/src/components/Icon/IconBsky.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
index 7f584fed76..97b9f7cef2 100644
--- a/src/components/Icon/IconCanary.tsx
+++ b/src/components/Icon/IconCanary.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconChevron.tsx b/src/components/Icon/IconChevron.tsx
index 4d40330ce0..15f34e1535 100644
--- a/src/components/Icon/IconChevron.tsx
+++ b/src/components/Icon/IconChevron.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconClose.tsx b/src/components/Icon/IconClose.tsx
index d685fb2178..dc4ad7c72d 100644
--- a/src/components/Icon/IconClose.tsx
+++ b/src/components/Icon/IconClose.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCodeBlock.tsx b/src/components/Icon/IconCodeBlock.tsx
index 755a2ae34a..ba61f237ed 100644
--- a/src/components/Icon/IconCodeBlock.tsx
+++ b/src/components/Icon/IconCodeBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconCopy.tsx b/src/components/Icon/IconCopy.tsx
index 500cd4fda9..f621346077 100644
--- a/src/components/Icon/IconCopy.tsx
+++ b/src/components/Icon/IconCopy.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconDeepDive.tsx b/src/components/Icon/IconDeepDive.tsx
index dfe1a928ca..121391f330 100644
--- a/src/components/Icon/IconDeepDive.tsx
+++ b/src/components/Icon/IconDeepDive.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconDownload.tsx b/src/components/Icon/IconDownload.tsx
index c0e7f49c21..be551d83e6 100644
--- a/src/components/Icon/IconDownload.tsx
+++ b/src/components/Icon/IconDownload.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconError.tsx b/src/components/Icon/IconError.tsx
index f101f62b22..966777fd44 100644
--- a/src/components/Icon/IconError.tsx
+++ b/src/components/Icon/IconError.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx
index 0bba612ebc..c0dce97f46 100644
--- a/src/components/Icon/IconExperimental.tsx
+++ b/src/components/Icon/IconExperimental.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -6,7 +13,7 @@ import {memo} from 'react';
export const IconExperimental = memo<
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
->(function IconCanary(
+>(function IconExperimental(
{className, title, size} = {
className: undefined,
title: undefined,
diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx
index 7f1080afa1..dea2764d55 100644
--- a/src/components/Icon/IconFacebookCircle.tsx
+++ b/src/components/Icon/IconFacebookCircle.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconGitHub.tsx b/src/components/Icon/IconGitHub.tsx
index 1852f52f1d..06c8f15564 100644
--- a/src/components/Icon/IconGitHub.tsx
+++ b/src/components/Icon/IconGitHub.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx
index 8bc90ee0c2..5ab29fa37e 100644
--- a/src/components/Icon/IconHamburger.tsx
+++ b/src/components/Icon/IconHamburger.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconHint.tsx b/src/components/Icon/IconHint.tsx
index b802bc79c0..802382b5d1 100644
--- a/src/components/Icon/IconHint.tsx
+++ b/src/components/Icon/IconHint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconInstagram.tsx b/src/components/Icon/IconInstagram.tsx
index 79def08e32..00d25a909d 100644
--- a/src/components/Icon/IconInstagram.tsx
+++ b/src/components/Icon/IconInstagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconLink.tsx b/src/components/Icon/IconLink.tsx
index e6e716d005..0f7d4dfed2 100644
--- a/src/components/Icon/IconLink.tsx
+++ b/src/components/Icon/IconLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNavArrow.tsx b/src/components/Icon/IconNavArrow.tsx
index f61175e9b5..40fde8afea 100644
--- a/src/components/Icon/IconNavArrow.tsx
+++ b/src/components/Icon/IconNavArrow.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNewPage.tsx b/src/components/Icon/IconNewPage.tsx
index dfa13bac95..aaf3e8157b 100644
--- a/src/components/Icon/IconNewPage.tsx
+++ b/src/components/Icon/IconNewPage.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconNote.tsx b/src/components/Icon/IconNote.tsx
index 1510c91c7e..82ed947b44 100644
--- a/src/components/Icon/IconNote.tsx
+++ b/src/components/Icon/IconNote.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconPitfall.tsx b/src/components/Icon/IconPitfall.tsx
index ee62478913..a80fc7d68f 100644
--- a/src/components/Icon/IconPitfall.tsx
+++ b/src/components/Icon/IconPitfall.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRestart.tsx b/src/components/Icon/IconRestart.tsx
index b4a6b62f5e..976203c65c 100644
--- a/src/components/Icon/IconRestart.tsx
+++ b/src/components/Icon/IconRestart.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx
index 457736c7c5..c5bb2473a9 100644
--- a/src/components/Icon/IconRocket.tsx
+++ b/src/components/Icon/IconRocket.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx
index 6208236f46..13029ec963 100644
--- a/src/components/Icon/IconRss.tsx
+++ b/src/components/Icon/IconRss.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconSearch.tsx b/src/components/Icon/IconSearch.tsx
index 917513561a..1dda00eb26 100644
--- a/src/components/Icon/IconSearch.tsx
+++ b/src/components/Icon/IconSearch.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconSolution.tsx b/src/components/Icon/IconSolution.tsx
index 668e41afe2..b0f1d44b38 100644
--- a/src/components/Icon/IconSolution.tsx
+++ b/src/components/Icon/IconSolution.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconTerminal.tsx b/src/components/Icon/IconTerminal.tsx
index 7b3a97a8cb..66dfd47b77 100644
--- a/src/components/Icon/IconTerminal.tsx
+++ b/src/components/Icon/IconTerminal.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx
index 9ea0bafdf3..72ded5201c 100644
--- a/src/components/Icon/IconThreads.tsx
+++ b/src/components/Icon/IconThreads.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx
index e84971f4ee..01802c253f 100644
--- a/src/components/Icon/IconTwitter.tsx
+++ b/src/components/Icon/IconTwitter.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Icon/IconWarning.tsx b/src/components/Icon/IconWarning.tsx
index 83534ec5f1..90b7cd41e6 100644
--- a/src/components/Icon/IconWarning.tsx
+++ b/src/components/Icon/IconWarning.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 499f5c3bf2..76ee294dc7 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index a29a4f0c30..ac01835a7e 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index a8316e133c..9b2801bf76 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index c3224e5174..89c25f46f3 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Sidebar/SidebarButton.tsx b/src/components/Layout/Sidebar/SidebarButton.tsx
index dc1f29a8d4..744172becb 100644
--- a/src/components/Layout/Sidebar/SidebarButton.tsx
+++ b/src/components/Layout/Sidebar/SidebarButton.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx
index aadb6cf4de..5c01fefc3b 100644
--- a/src/components/Layout/Sidebar/SidebarLink.tsx
+++ b/src/components/Layout/Sidebar/SidebarLink.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 72003df74f..863355bfdc 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index d0e2915475..69664e6bc7 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/SidebarNav/SidebarNav.tsx b/src/components/Layout/SidebarNav/SidebarNav.tsx
index 1712709603..77beb4d729 100644
--- a/src/components/Layout/SidebarNav/SidebarNav.tsx
+++ b/src/components/Layout/SidebarNav/SidebarNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/SidebarNav/index.tsx b/src/components/Layout/SidebarNav/index.tsx
index b268bbd294..f9680d803f 100644
--- a/src/components/Layout/SidebarNav/index.tsx
+++ b/src/components/Layout/SidebarNav/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
index c97b53f0e1..80a5c5535e 100644
--- a/src/components/Layout/Toc.tsx
+++ b/src/components/Layout/Toc.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/TopNav/BrandMenu.tsx b/src/components/Layout/TopNav/BrandMenu.tsx
index 3bd8776f22..218e423ce3 100644
--- a/src/components/Layout/TopNav/BrandMenu.tsx
+++ b/src/components/Layout/TopNav/BrandMenu.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import * as ContextMenu from '@radix-ui/react-context-menu';
import {IconCopy} from 'components/Icon/IconCopy';
import {IconDownload} from 'components/Icon/IconDownload';
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 028d4b5077..ac4bf471c8 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/TopNav/index.tsx b/src/components/Layout/TopNav/index.tsx
index 8472fb126d..e76fa5ed0d 100644
--- a/src/components/Layout/TopNav/index.tsx
+++ b/src/components/Layout/TopNav/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index b3d14725d4..5a85a3e21b 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/src/components/Layout/getRouteMeta.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Layout/useTocHighlight.tsx b/src/components/Layout/useTocHighlight.tsx
index 544396c68b..02385409ff 100644
--- a/src/components/Layout/useTocHighlight.tsx
+++ b/src/components/Layout/useTocHighlight.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 8c4f7da4f9..3ea4ba9ac8 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/BlogCard.tsx b/src/components/MDX/BlogCard.tsx
index 48cdd30683..7d4193b9d4 100644
--- a/src/components/MDX/BlogCard.tsx
+++ b/src/components/MDX/BlogCard.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Challenges/Challenge.tsx b/src/components/MDX/Challenges/Challenge.tsx
index b3564c80c6..75529e0a4c 100644
--- a/src/components/MDX/Challenges/Challenge.tsx
+++ b/src/components/MDX/Challenges/Challenge.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Challenges/Challenges.tsx b/src/components/MDX/Challenges/Challenges.tsx
index f214fb828a..7a4f38dbd5 100644
--- a/src/components/MDX/Challenges/Challenges.tsx
+++ b/src/components/MDX/Challenges/Challenges.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx
index 736db093c6..0511bd05ad 100644
--- a/src/components/MDX/Challenges/Navigation.tsx
+++ b/src/components/MDX/Challenges/Navigation.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -108,7 +115,7 @@ export function Navigation({
onClick={handleScrollLeft}
aria-label="Scroll left"
className={cn(
- 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180',
+ 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0',
{
'text-primary dark:text-primary-dark': canScrollLeft,
'text-gray-30': !canScrollLeft,
@@ -120,7 +127,7 @@ export function Navigation({
onClick={handleScrollRight}
aria-label="Scroll right"
className={cn(
- 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180',
+ 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e',
{
'text-primary dark:text-primary-dark': canScrollRight,
'text-gray-30': !canScrollRight,
diff --git a/src/components/MDX/Challenges/index.tsx b/src/components/MDX/Challenges/index.tsx
index 413fd46112..27e3df1ef0 100644
--- a/src/components/MDX/Challenges/index.tsx
+++ b/src/components/MDX/Challenges/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
index 42165c57d8..3eeac39452 100644
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ b/src/components/MDX/CodeBlock/CodeBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/CodeBlock/index.tsx b/src/components/MDX/CodeBlock/index.tsx
index 551c1d1b66..d3ed3a0659 100644
--- a/src/components/MDX/CodeBlock/index.tsx
+++ b/src/components/MDX/CodeBlock/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx
index 2a198fc56a..ba18ae973f 100644
--- a/src/components/MDX/CodeDiagram.tsx
+++ b/src/components/MDX/CodeDiagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx
index 6044b13707..1847abc5c9 100644
--- a/src/components/MDX/ConsoleBlock.tsx
+++ b/src/components/MDX/ConsoleBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Diagram.tsx b/src/components/MDX/Diagram.tsx
index 649f48dff8..579c86ebec 100644
--- a/src/components/MDX/Diagram.tsx
+++ b/src/components/MDX/Diagram.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/DiagramGroup.tsx b/src/components/MDX/DiagramGroup.tsx
index 6c5130a3dc..8e3bf46c3f 100644
--- a/src/components/MDX/DiagramGroup.tsx
+++ b/src/components/MDX/DiagramGroup.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx
index a9b7455df9..423790198b 100644
--- a/src/components/MDX/ErrorDecoder.tsx
+++ b/src/components/MDX/ErrorDecoder.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import {useEffect, useState} from 'react';
import {useErrorDecoderParams} from '../ErrorDecoderContext';
import cn from 'classnames';
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index 5317009a12..543e243263 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
index f8c3b1cf9e..b21e7e2ee1 100644
--- a/src/components/MDX/ExpandableExample.tsx
+++ b/src/components/MDX/ExpandableExample.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Heading.tsx b/src/components/MDX/Heading.tsx
index a9f3efc380..5890a3a484 100644
--- a/src/components/MDX/Heading.tsx
+++ b/src/components/MDX/Heading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/InlineCode.tsx b/src/components/MDX/InlineCode.tsx
index 5759a7c0ae..17e4683b99 100644
--- a/src/components/MDX/InlineCode.tsx
+++ b/src/components/MDX/InlineCode.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Intro.tsx b/src/components/MDX/Intro.tsx
index 0522df678c..b0bee624d5 100644
--- a/src/components/MDX/Intro.tsx
+++ b/src/components/MDX/Intro.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/LanguagesContext.tsx b/src/components/MDX/LanguagesContext.tsx
index 776a11c0d9..cd9f888167 100644
--- a/src/components/MDX/LanguagesContext.tsx
+++ b/src/components/MDX/LanguagesContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Link.tsx b/src/components/MDX/Link.tsx
index 7bf041e565..8a47c401f2 100644
--- a/src/components/MDX/Link.tsx
+++ b/src/components/MDX/Link.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 6a776fbb8a..368e3c4f9d 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -37,6 +44,7 @@ import {finishedTranslations} from 'utils/finishedTranslations';
import ErrorDecoder from './ErrorDecoder';
import {IconCanary} from '../Icon/IconCanary';
+import {IconExperimental} from 'components/Icon/IconExperimental';
function CodeStep({children, step}: {children: any; step: number}) {
return (
@@ -130,7 +138,7 @@ const ExperimentalBadge = ({title}: {title: string}) => (
className={
'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
}>
- }) {
// Note: in a real useEvent, onContainerResize would be omitted.
}, [isMultiFile, onContainerResize]);
- const handleReset = () => {
+ const handleClear = () => {
/**
* resetAllFiles must come first, otherwise
* the previous content will appear for a second
@@ -103,13 +111,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
*
* Plus, it should only prompt if there's any file changes
*/
- if (
- sandpack.editorState === 'dirty' &&
- confirm('Reset all your edits too?')
- ) {
+ if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) {
sandpack.resetAllFiles();
}
+ refresh();
+ };
+ const handleReload = () => {
refresh();
};
@@ -188,7 +196,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
className="px-3 flex items-center justify-end text-start"
translate="yes">
void;
+}
+
+export function ReloadButton({onReload}: ReloadButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx
deleted file mode 100644
index 7d99ffea0d..0000000000
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-import * as React from 'react';
-import {IconRestart} from '../../Icon/IconRestart';
-export interface ResetButtonProps {
- onReset: () => void;
-}
-
-export function ResetButton({onReset}: ResetButtonProps) {
- return (
-
- );
-}
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index 67f40d0b3b..48d8daee50 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/Themes.tsx b/src/components/MDX/Sandpack/Themes.tsx
index 3923470ca9..8aa34dc954 100644
--- a/src/components/MDX/Sandpack/Themes.tsx
+++ b/src/components/MDX/Sandpack/Themes.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/createFileMap.ts b/src/components/MDX/Sandpack/createFileMap.ts
index 193b07be82..049face93e 100644
--- a/src/components/MDX/Sandpack/createFileMap.ts
+++ b/src/components/MDX/Sandpack/createFileMap.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
@@ -9,6 +16,66 @@ export const AppJSPath = `/src/App.js`;
export const StylesCSSPath = `/src/styles.css`;
export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
+/**
+ * Tokenize meta attributes while ignoring brace-wrapped metadata (e.g. {expectedErrors: …}).
+ */
+function splitMeta(meta: string): string[] {
+ const tokens: string[] = [];
+ let current = '';
+ let depth = 0;
+ const trimmed = meta.trim();
+
+ for (let ii = 0; ii < trimmed.length; ii++) {
+ const char = trimmed[ii];
+
+ if (char === '{') {
+ if (depth === 0 && current) {
+ tokens.push(current);
+ current = '';
+ }
+ depth += 1;
+ continue;
+ }
+
+ if (char === '}') {
+ if (depth > 0) {
+ depth -= 1;
+ }
+ if (depth === 0) {
+ current = '';
+ }
+ if (depth < 0) {
+ throw new Error(`Unexpected closing brace in meta: ${meta}`);
+ }
+ continue;
+ }
+
+ if (depth > 0) {
+ continue;
+ }
+
+ if (/\s/.test(char)) {
+ if (current) {
+ tokens.push(current);
+ current = '';
+ }
+ continue;
+ }
+
+ current += char;
+ }
+
+ if (current) {
+ tokens.push(current);
+ }
+
+ if (depth !== 0) {
+ throw new Error(`Unclosed brace in meta: ${meta}`);
+ }
+
+ return tokens;
+}
+
export const createFileMap = (codeSnippets: any) => {
return codeSnippets.reduce(
(result: Record, codeSnippet: React.ReactElement) => {
@@ -30,12 +97,17 @@ export const createFileMap = (codeSnippets: any) => {
let fileActive = false; // if the file tab is shown by default
if (props.meta) {
- const [name, ...params] = props.meta.split(' ');
- filePath = '/' + name;
- if (params.includes('hidden')) {
+ const tokens = splitMeta(props.meta);
+ const name = tokens.find(
+ (token) => token.includes('/') || token.includes('.')
+ );
+ if (name) {
+ filePath = name.startsWith('/') ? name : `/${name}`;
+ }
+ if (tokens.includes('hidden')) {
fileHidden = true;
}
- if (params.includes('active')) {
+ if (tokens.includes('active')) {
fileActive = true;
}
} else {
@@ -50,6 +122,18 @@ export const createFileMap = (codeSnippets: any) => {
}
}
+ if (!filePath) {
+ if (props.className === 'language-js') {
+ filePath = AppJSPath;
+ } else if (props.className === 'language-css') {
+ filePath = StylesCSSPath;
+ } else {
+ throw new Error(
+ `Code block is missing a filename: ${props.children}`
+ );
+ }
+ }
+
if (result[filePath]) {
throw new Error(
`File ${filePath} was defined multiple times. Each file snippet should have a unique path name`
diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx
index 6755ba8de6..08e7dd6f0b 100644
--- a/src/components/MDX/Sandpack/index.tsx
+++ b/src/components/MDX/Sandpack/index.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx
index 5fea2f1100..a0b8354612 100644
--- a/src/components/MDX/Sandpack/runESLint.tsx
+++ b/src/components/MDX/Sandpack/runESLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
// @ts-nocheck
import {Linter} from 'eslint/lib/linter/linter';
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
index dd6fd12bda..358c8616ed 100644
--- a/src/components/MDX/Sandpack/template.ts
+++ b/src/components/MDX/Sandpack/template.ts
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
export const template = {
'/src/index.js': {
hidden: true,
diff --git a/src/components/MDX/Sandpack/useSandpackLint.tsx b/src/components/MDX/Sandpack/useSandpackLint.tsx
index ec05fbe0d0..479b53ee0d 100644
--- a/src/components/MDX/Sandpack/useSandpackLint.tsx
+++ b/src/components/MDX/Sandpack/useSandpackLint.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
index 51ce28dc14..c5149deb94 100644
--- a/src/components/MDX/SandpackWithHTMLOutput.tsx
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
import {Children, memo} from 'react';
import InlineCode from './InlineCode';
import Sandpack from './Sandpack';
diff --git a/src/components/MDX/SimpleCallout.tsx b/src/components/MDX/SimpleCallout.tsx
index ae259bcf57..0e124baa74 100644
--- a/src/components/MDX/SimpleCallout.tsx
+++ b/src/components/MDX/SimpleCallout.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2c2fffa734..2d0c65537e 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index 4752927161..bdcd8e4660 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/TocContext.tsx b/src/components/MDX/TocContext.tsx
index 8aeead370e..924e6e09ee 100644
--- a/src/components/MDX/TocContext.tsx
+++ b/src/components/MDX/TocContext.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/MDX/YouWillLearnCard.tsx b/src/components/MDX/YouWillLearnCard.tsx
index 05f9d5fadf..b9a537e9ef 100644
--- a/src/components/MDX/YouWillLearnCard.tsx
+++ b/src/components/MDX/YouWillLearnCard.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx
index 3f15afe953..7605427500 100644
--- a/src/components/PageHeading.tsx
+++ b/src/components/PageHeading.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index c7401487b7..24b066d70f 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
index fa89769d11..f281d4d82b 100644
--- a/src/components/Seo.tsx
+++ b/src/components/Seo.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index ae87d2050d..4e404adcf8 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -1,6 +1,8 @@
/**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
*
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
*/
import {useRef, useEffect} from 'react';
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 7dd5d273c8..28157d41b5 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*/
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
index ecbbb87471..2ebbf3baeb 100644
--- a/src/content/blog/2025/04/21/react-compiler-rc.md
+++ b/src/content/blog/2025/04/21/react-compiler-rc.md
@@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
-If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
+If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
To install:
npm
-{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
pnpm
-{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
yarn
-{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
```js
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 9f5a00318e..df5971b52a 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -2521,7 +2521,7 @@ export default function App() {
const { url } = useRouter();
// Define a default animation of .slow-fade.
- // See animations.css for the animation definiton.
+ // See animations.css for the animation definition.
return (
{url === '/' ?
+
+**`
+
在[过去](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)的[更新](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)中，我们分享了我们正在研究一个 API，允许组件在视觉上被隐藏并降低优先级，相比卸载或使用 CSS 隐藏，这种方式能以更低的性能成本保留 UI 状态。
现在我们准备分享这个 API 及其工作原理，这样你就可以开始在实验性 React 版本中测试它了。
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 581046a8c0..9354dc9c36 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -20,6 +20,11 @@ October 2-4, 2025. Alicante, Spain.
[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
+October 04, 2025. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
### React Conf 2025 {/*react-conf-2025*/}
October 7-8, 2025. Henderson, Nevada, USA and free livestream
diff --git a/src/content/community/meet-the-team.md b/src/content/community/meet-the-team.md
deleted file mode 100644
index 81587ba17a..0000000000
--- a/src/content/community/meet-the-team.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
----
-
-
-
-React 的开发工作由 Facebook 专门工作小组全职领导。它也接受来自世界各地开发者们的贡献。
-
-
-
-## React 核心团队 {/*react-core*/}
-
-React 团队成员全职专注于从事核心组件 API、React DOM 和 React Native 的引擎、React DevTools 以及 React 文档等工作。
-
-目前 React 团队成员如下（按字母排序）。
-
-### Andrew Clark {/*andrew-clark*/}
-
-
-
-[@acdlite on GitHub](https://github.com/acdlite) · [@acdlite on Twitter](https://twitter.com/acdlite)
-
-Andrew 通过 WordPress 制作网站开始接触 Web 开发，最终走上了 JavaScript 这条不归路。他最喜欢的业余活动是去 KTV 唱歌。Andrew 时而是迪士尼恶棍，时而是迪士尼公主，这取决于他当天的状态。
-
-### Brian Vaughn {/*brian-vaughn*/}
-
-
-
-[@bvaughn on GitHub](https://github.com/bvaughn) · [@brian\_d\_vaughn on Twitter](https://twitter.com/brian_d_vaughn)
-
-Brian 在大学中主修艺术，为了支付学费而兼职学习了编程。后来，他意识到自己更喜欢从事开源方面的工作。Brian 有一个 [单人乐队](https://soundcloud.com/brianvaughn/) 和两个 [双人](https://soundcloud.com/pilotlessdrone) [乐队](https://soundcloud.com/pinwurm)。同时，他还拥有一只可爱的猫咪。
-
-### Dan Abramov {/*dan-abramov*/}
-
-
-
-[@gaearon on GitHub](https://github.com/gaearon) · [@dan_abramov on Twitter](https://twitter.com/dan_abramov)
-
-Dan 是不经意间，发现微软 PowerPoint 中的 Visual Basic 后开始接触编程。他通过将 [Sebastian](#sebastian-markbage) 的推文转为长篇博文后，找到了自己真正的使命。Dan 偶尔会沉浸于《堡垒之夜》胜利的喜悦当中。
-
-### Luna Ruan {/*luna-ruan*/}
-
-
-
-[@lunaruan on GitHub](https://github.com/lunaruan) · [@lunaruan on Twitter](https://twitter.com/lunaruan)
-
-Luna 学习编程是因为她觉得通过编程可以创造电子游戏。然而，她最终就职于 Pinterest 担任 Web 开发，现在又投身于 React 本身的开发当中。Luna 不再向往做电子游戏，但如果她感到无聊时，她会计划做创意写作。
-
-### Marco Salazar {/*marco-salazar*/}
-
-
-
-[@salazarm on GitHub](https://github.com/salazarm) · [@BkOptimism on Twitter](https://twitter.com/BkOptimism)
-
-Marco 的第一门编程语言是汇编，因为他可以通过汇编来侵入电子游戏。如今，网络游戏愈发安全，所以他退而求其次的选择公平竞技（大部分情况下）。闲暇时，他会在跑步机上玩游戏，并制作一些他从未完成的艺术品。希望他的 PR 不会有相同的命运。
-
-### Rachel Nabors {/*rachel-nabors*/}
-
-
-
-[@rachelnabors on GitHub](https://github.com/rachelnabors) · [@rachelnabors on Twitter](https://twitter.com/rachelnabors)
-
-Rachel 曾经编写过一本 [关于 UI 动画的书](https://abookapart.com/products/animation-at-work)，并与 MDN 和 W3C 合作开发了 Web 动画 API。现在她整忙于 React 团队的教程和社区工程。暗地里，她是一个获奖的少女漫画家。在公司厨房里，曾看到过她泡花茶。
-
-### Rick Hanlon {/*rick-hanlon*/}
-
-
-
-[@rickhanlonii on GitHub](https://github.com/rickhanlonii) · [@rickhanlonii on Twitter](https://twitter.com/rickhanlonii)
-
-Ricky 主修理论数学，在加入 React 团队前，他在 React Native 团队呆了几年。当他不编程时，你可以找他一起玩滑雪板、骑山地车、爬山、打高尔夫，或者关闭那些与 issue 模板不一致的 Github issue。
-
-### Sebastian Markbåge {/*sebastian-markbåge*/}
-
-
-
-[@sebmarkbage on GitHub](https://github.com/sebmarkbage) · [@sebmarkbage on Twitter](https://twitter.com/sebmarkbage)
-
-Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
-
-### Seth Webster {/*seth-webster*/}
-
-
-
-[@sethwebster on GitHub](https://github.com/sethwebster) · [@sethwebster on Twitter](https://twitter.com/sethwebster)
-
-Seth 从小就学习编程，在亚利桑那州图森市长大。放学后，他沉浸在音乐的殿堂里，在回归工作岗位前，他做了大约 10 年的巡回音乐人，后来就职于 Intuit。在业余时，他喜欢 [摄影](https://www.sethwebster.com) 还会参与美国东北部的动物救援机构。
-
-### Xuan Huang {/*xuan-huang*/}
-
-
-
-[@huxpro on GitHub](https://github.com/huxpro) · [@huxpro on Twitter](https://twitter.com/huxpro)
-
-Xuan 小时候接触过编程，用 Flash 制作游戏。他在大学里从事数字媒体艺术，但最终制作编译器吸引住了——正好 React 需要一个。工作之余，喜欢拿铁艺术，热爱网球和乒乓球。
-
-## 历史贡献者 {/*past-contributors*/}
-
-你可以在 [acknowledgements](/community/acknowledgements) 页面中找到团队的历史成员和其他多年来为 React 做出过重大贡献的人。
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 479ae50d4b..78d48093aa 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
* [React Native London](https://guild.host/RNLDN)
## Finland {/*finland*/}
@@ -137,6 +138,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Portugal {/*portugal*/}
* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
+## Scotland (UK) {/*scotland-uk*/}
+* [Edinburgh](https://www.meetup.com/react-edinburgh/)
+
## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
diff --git a/src/content/community/videos.md b/src/content/community/videos.md
index 3fad95786e..1fca603074 100644
--- a/src/content/community/videos.md
+++ b/src/content/community/videos.md
@@ -8,6 +8,75 @@ Videos dedicated to the discussion of React and the React ecosystem.
+## React Conf 2024 {/*react-conf-2024*/}
+
+At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference:
+
+
-```js
+```js {expectedErrors: {'react-compiler': [5]}}
let guest = 0;
function Cup() {
diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md
index 8fdb65bdb8..4438ab487e 100644
--- a/src/content/learn/escape-hatches.md
+++ b/src/content/learn/escape-hatches.md
@@ -201,7 +201,7 @@ Effect 是 React 范式中的一种脱围机制。它们可以“逃出” React
例如，不需要 Effect 来根据其他状态调整某些状态：
-```js {5-9}
+```js {expectedErrors: {'react-compiler': [8]}} {5-9}
function Form() {
const [firstName, setFirstName] = useState('泰勒');
const [lastName, setLastName] = useState('斯威夫特');
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index d910306a17..3fab097962 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -97,7 +97,7 @@ React 的渲染过程必须自始至终是纯粹的。组件应该只 **返回**
-```js
+```js {expectedErrors: {'react-compiler': [5]}}
let guest = 0;
function Cup() {
@@ -384,7 +384,7 @@ body > * {
-```js src/Profile.js
+```js {expectedErrors: {'react-compiler': [7]}} src/Profile.js
import Panel from './Panel.js';
import { getImageUrl } from './utils.js';
@@ -606,7 +606,7 @@ export default function StoryTray({ stories }) {
}
```
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
@@ -702,7 +702,7 @@ export default function StoryTray({ stories }) {
}
```
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
@@ -794,7 +794,7 @@ export default function StoryTray({ stories }) {
}
```
-```js src/App.js hidden
+```js {expectedErrors: {'react-compiler': [16]}} src/App.js hidden
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 3449b32038..a8a2cb71b0 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1131,7 +1131,7 @@ body {
-```js
+```js {expectedErrors: {'react-compiler': [16]}}
import { useState, useEffect } from 'react';
export default function App() {
@@ -1374,7 +1374,7 @@ export default function App() {
}
```
-```js src/ChatRoom.js active
+```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
import { useState, useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 937d5c9175..ffaec1a502 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -249,13 +249,13 @@ export default function CatFriends() {
-```js
+```js {expectedErrors: {'react-compiler': [7]}}
import { useState } from 'react';
export default function MyComponent() {
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
deleted file mode 100644
index 1b36f97c9f..0000000000
--- a/src/content/learn/react-compiler.md
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: React Compiler
----
-
-
-本页面将为你介绍新的 React Compiler，以及如何成功试用。
-
-
-
-
-* 开始使用 React Compiler
-* 安装 React Compiler 和 ESLint 插件
-* 疑难解答
-
-
-
-
-React Compiler 是一个处于 RC 阶段的新的编译器，我们将其开源以获取社区反馈。现在我们建议所有人都使用编译器。
-
-最新的 RC 版本发布于 `@rc` 标签，每日实验版本发布于 `@experimental` 标签。
-
-
-React Compiler 是一个新编译器，我们将其开源以获取社区的早期反馈。它是一个仅在构建时使用的工具，可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用，并且了解 [React 规则](/reference/rules)，因此你无需重写任何代码即可使用它。
-
-
-编译器还包括一个 [ESLint 插件](#installing-eslint-plugin-react-compiler)，可以在你的编辑器中直接显示编译器的分析结果。**我们强烈建议大家使用 linter。** 不过 linter 并不需要安装编译器，因此即使你还没有准备好尝试编译器也可以使用它。
-
-编译器目前处于 `beta` 阶段，并且可以在 React 17+ 应用程序和库上使用。安装方式如下：
-
-
-{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
-
-
-或者使用 Yarn：
-
-
-{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
-
-
-如果你还没有使用 React 19，请参考 [此内容](#using-react-compiler-with-react-17-or-18) 以获得进一步说明。
-
-### 编译器是做什么的？ {/*what-does-the-compiler-do*/}
-
-为了优化应用程序，React Compiler 会自动对你的代码进行记忆化处理。你可能已经熟悉了像 `useMemo`、`useCallback` 和 `React.memo` 这样的 API，通过这些 API，你可以告诉 React，如果输入没有发生变化，应用程序的某些部分不需要重新计算，从而减少更新时的工作量。虽然这些功能很强大，但很容易忘记应用记忆化或者错误地应用它们。这可能会导致更新效率低下，因为 React 必须检查 UI 中没有任何**有意义**的更改的部分。
-
-编译器利用其对 JavaScript 和 React 规则的了解，自动对组件和钩子中的值或值组进行记忆化。如果它检测到规则的破坏，它将自动跳过那些组件或钩子，并继续安全地编译其他代码。
-
-
-React Compiler 可以静态检测 React 规则何时被破坏，并安全地选择不优化受影响的组件或钩子。编译器没有必要对代码库进行 100% 的优化。
-
-
-如果你的代码库已经非常好地进行了记忆化处理，你可能不会指望通过编译器看到主要的性能改进。然而，在实践中，手动正确记忆化导致性能问题的依赖关系是很棘手的。
-
-
-#### React Compiler 添加了什么样的记忆？ {/*what-kind-of-memoization-does-react-compiler-add*/}
-
-React Compiler 的初始版本主要专注于**改善更新性能**（重新渲染现有组件），因此它专注于以下两种用例：
-
-1. **跳过组件的级联重新渲染**
- * 重新渲染 `` 的状态发生变化时，`` 将重新呈现：
-
-```javascript
-function FriendList({ friends }) {
- const onlineCount = useFriendOnlineCount();
- if (friends.length === 0) {
- return `。
-
-#### 昂贵计算也会被记忆 {/*expensive-calculations-also-get-memoized*/}
-
-编译器还可以自动记忆渲染过程中使用的昂贵计算：
-
-```js
-// 由于这不是组件或钩子，React Compiler 不会进行记忆
-function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
-
-// 由 React Compiler 进行了记忆化，因为这是一个组件
-function TableContainer({ items }) {
- // 这个函数调用将被记忆：
- const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
- // ...
-}
-```
-[**在 React Compiler Playground 中查看此示例**](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
-
-但是，如果 `expensivelyProcessAReallyLargeArrayOfObjects` 确实是一个昂贵的函数，你可能需要考虑在 React 之外实现它自己的记忆，因为：
-
-- React Compiler 只记住 React 组件和钩子，而不是每个函数
-- React Compiler 的记忆不会在多个组件或钩子之间共享
-
-因此，如果在许多不同的组件中使用 `expensivelyProcessAReallyLargeArrayOfObjects`，即使传递相同的 `items`，那昂贵的计算也会被重复运行。我们建议先进行 [性能分析](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)，看看是否真的那么昂贵，然后再使代码更加复杂。
-
-
-### 我应该尝试一下编译器吗？ {/*should-i-try-out-the-compiler*/}
-
-请注意，编译器处于 RC 阶段，并已在生产中进行了广泛测试。虽然它已经在 Meta 等公司的生产环境中使用过，但将编译器应用于你的应用程序生产环境将取决于你的代码库的健康状况以及你是否遵循了 [React 的规则](/reference/rules)。
-
-**你现在不必急着使用编译器。在采用它之前等到它达到稳定版本是可以的。** 然而，我们确实赞赏在你的应用程序中进行小型实验，以便你可以向我们 [提供反馈](#reporting-issues)，帮助使编译器更好。
-
-## 开始 {/*getting-started*/}
-
-除了这些文档之外，我们还建议查看 [React Compiler 工作组](https://github.com/reactwg/react-compiler)，以获取有关编译器的更多信息和讨论。
-
-### 安装 eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/}
-
-React Compiler 还支持作为 ESLint 插件。你可以通过安装 eslint-plugin-react-hooks@^6.0.0-rc.1 来使用它。
-
-
-{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
-
-
-查看 [编辑器设置](/learn/editor-setup#linting) 指南来了解更多信息。
-
-ESLint 插件将在编辑器中显示任何违反 React 规则的行为。当它这样做时，这意味着编译器跳过了优化该组件或钩子。这是完全可以的，编译器可以恢复并继续优化代码库中的其他组件。
-
-
-**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们，以增加被优化的组件和钩子的数量，但在你可以使用编译器之前并不需要修复所有问题。
-
-
-### 将编译器应用到你的代码库 {/*using-the-compiler-effectively*/}
-
-#### 现有项目 {/*existing-projects*/}
-编译器旨在编译遵循 React 规则的功能组件和钩子。它还可以处理违反这些规则的代码，通过跳过这些组件或钩子来终止执行。然而，由于JavaScript的灵活性，编译器无法捕捉到每一个可能的违规行为，可能会出现错误的负面编译：也就是说，编译器可能会意外地编译出一个违反 [React 规则](/reference/rules) 的组件或钩子，这可能导致未定义的行为。
-
-因此，要在现有项目中成功采用编译器，我们建议你先在项目代码中的一个小目录中运行它。你可以通过将编译器配置为仅在一组特定的目录上运行来执行此操作：
-
-```js {3}
-const ReactCompilerConfig = {
- sources: (filename) => {
- return filename.indexOf('src/path/to/dir') !== -1;
- },
-};
-```
-
-当你对编译器更有信心时，你也可以将覆盖范围扩展到其他目录，并逐渐将其推出到整个应用程序。
-
-#### 新项目 {/*new-projects*/}
-
-如果你正在启动一个新项目，你可以在整个代码库上启用编译器，这是默认行为。
-
-### 在 React 17 或 18 中使用 React Compiler {/*using-react-compiler-with-react-17-or-18*/}
-
-React Compiler 与 React 19 RC 配合使用效果最佳。如果你无法升级，可以安装额外的 `react-compiler-runtime` 包来编译代码并在 19 之前的版本上运行。 但请注意，支持的最低版本是 17。
-
-
-{`npm install react-compiler-runtime@rc`}
-
-
-你还应该在编译器配置中添加正确的 `target`值，为你所使用的 React 大版本。
-
-```js {3}
-// babel.config.js
-const ReactCompilerConfig = {
- target: '18' // '17' | '18' | '19'
-};
-
-module.exports = function () {
- return {
- plugins: [
- ['babel-plugin-react-compiler', ReactCompilerConfig],
- ],
- };
-};
-```
-
-### 在库中使用 Compiler {/*using-the-compiler-on-libraries*/}
-
-React Compiler 还可用于编译库。由于 React Compiler 需要在代码转换之前的源码上运行，因此应用程序无法使用 pipeline 来编译所使用的库。因此我们建议库维护人员使用编译器独立编译和测试他们的库，并将编译后的代码发布到 npm。
-
-由于库的代码是预编译的，因此用户无需启用 Compiler 即可从编译器的自动记忆化中受益。如果库的 target 不是 React 19，请指定一个最小的 [`target` 并且将 `react-compiler-runtime` 添加为直接依赖](#using-react-compiler-with-react-17-or-18)。这个运行时包将根据应用程序的版本使用正确的 API 实现，并在必要时填充缺失的 API。
-
-库代码通常需要更复杂的模式和脱围机制。因此我们建议你进行足够的测试，以便发现在在库中使用编译器时可能出现的任何问题。对于任何发现的问题都可以使用 [`'use no memo'` 指令](#something-is-not-working-after-compilation) 来选择退出对特定组件或 Hook 的自动记忆化。
-
-与应用程序类似，无需 100% 编译组件或 Hook 就可以看到编译器带来的好处。一个好的起点可能是确定库中对性能最敏感的部分，并确保它们没有违反 [React 规则](/reference/rules)，你可以通过使用 `eslint-plugin-react-compiler` 来完成。
-
-## 用法 {/*installation*/}
-
-### Babel {/*usage-with-babel*/}
-
-
-{`npm install babel-plugin-react-compiler@rc`}
-
-
-编译器包含一个 Babel 插件，你可以在构建流水线中使用它来运行编译器。
-
-安装后，请将其添加到你的 Babel 配置中。请注意，编译器必须**首先**在流水线中运行。
-
-```js {7}
-// babel.config.js
-const ReactCompilerConfig = { /* ... */ };
-
-module.exports = function () {
- return {
- plugins: [
- ['babel-plugin-react-compiler', ReactCompilerConfig], // 必须首先运行！
- // ...
- ],
- };
-};
-```
-
-`babel-plugin-react-compiler` 应该在其他 Babel 插件之前运行，因为编译器需要输入源信息进行声音分析。
-
-### Vite {/*usage-with-vite*/}
-
-如果你使用 Vite，你可以将插件添加到 vite-plugin-react 中：
-
-```js {10}
-// vite.config.js
-const ReactCompilerConfig = { /* ... */ };
-
-export default defineConfig(() => {
- return {
- plugins: [
- react({
- babel: {
- plugins: [
- ["babel-plugin-react-compiler", ReactCompilerConfig],
- ],
- },
- }),
- ],
- // ...
- };
-});
-```
-
-### Next.js {/*usage-with-nextjs*/}
-
-请参考 [Next.js 文档](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) 来了解更多信息。
-
-### Remix {/*usage-with-remix*/}
-安装 `vite-plugin-babel`, 并将编译器的 Babel 插件添加到其中：
-
-
-{`npm install vite-plugin-babel`}
-
-
-```js {2,14}
-// vite.config.js
-import babel from "vite-plugin-babel";
-
-const ReactCompilerConfig = { /* ... */ };
-
-export default defineConfig({
- plugins: [
- remix({ /* ... */}),
- babel({
- filter: /\.[jt]sx?$/,
- babelConfig: {
- presets: ["@babel/preset-typescript"], // 如果你使用 TypeScript
- plugins: [
- ["babel-plugin-react-compiler", ReactCompilerConfig],
- ],
- },
- }),
- ],
-});
-```
-
-### Webpack {/*usage-with-webpack*/}
-
-由社区提供的 webpack loader 可以 [在这里找到](https://github.com/SukkaW/react-compiler-webpack)。
-
-### Expo {/*usage-with-expo*/}
-
-请参考 [Expo 文档](https://docs.expo.dev/guides/react-compiler/) 应用程序中启用和使用 React Compiler。
-
-### Metro (React Native) {/*usage-with-react-native-metro*/}
-
-React Native 通过 Metro 使用 Babel，因此请参考 [使用 Babel](#usage-with-babel) 部分的安装说明。
-
-### Rspack {/*usage-with-rspack*/}
-
-请参考 [Rspack 文档](https://rspack.dev/guide/tech/react#react-compiler) 以启用并在 Rspack 应用程序中使用 React Compiler。
-
-### Rsbuild {/*usage-with-rsbuild*/}
-
-请参考 [Rsbuild 文档](https://rsbuild.dev/guide/framework/react#react-compiler) 以在 Rsbuild 应用程序中启用和使用 React Compiler。
-
-## 疑难解答 {/*troubleshooting*/}
-
-请先在 [React Compiler Playground](https://playground.react.dev/) 上创建一个最小的可复现问题，并将其包含在你的错误报告中。你可以在 [facebook/react](https://github.com/facebook/react/issues) 仓库中提交 issue。
-
-你也可以通过申请成为成员，在 React Compiler 工作组中提供反馈意见。请查看 [README](https://github.com/reactwg/react-compiler) 以获取更多加入详情。
-
-### 编译器假设什么？ {/*what-does-the-compiler-assume*/}
-
-React Compiler 假设你的代码：
-
-1. 是有效的，语义化的 JavaScript
-2. 在访问可空/可选值和属性之前，测试它们是否已定义（例如，如果使用 TypeScript，则启用 [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks)），即：`if (object.nullableProperty) { object.nullableProperty.foo }` 或者使用可选链 `object.nullableProperty?.foo`
-3. 遵循 [React 规则](/reference/rules)
-
-React Compiler 可以静态验证 React 的许多规则，并且在检测到错误时会安全地跳过编译。要查看错误，我们建议同时安装 [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler)。
-
-### 我如何知道我的组件已被优化？ {/*how-do-i-know-my-components-have-been-optimized*/}
-
-[React DevTools](/learn/react-developer-tools)（v5.0+）和 [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) 内置支持 React Compiler，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
-
-### 编译后某些内容无法正常工作 {/*something-is-not-working-after-compilation*/}
-如果你安装了 eslint-plugin-react-compiler ，编译器将在你的编辑器中显示任何违反 React 规则的情况。当它这样做时，意味着编译器跳过了对该组件或钩子的优化。这完全没问题，并且编译器可以恢复并继续优化你代码库中的其他组件。**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们，以增加被优化的组件和钩子的数量。
-
-然而，由于 JavaScript 的灵活和动态性质，不可能全面检测到所有情况。在这些情况下，可能会出现错误和未定义的行为，例如无限循环。
-
-如果你的应用在编译后无法正常工作，并且你没有看到任何 ESLint 错误，编译器可能错误地编译了你的代码。为了确认这一点，尝试通过积极选择你认为可能相关的任何组件或钩子，并通过 [`"use no memo"` 指令](#opt-out-of-the-compiler-for-a-component) 退出优化来解决问题。
-
-```js {2}
-function SuspiciousComponent() {
- "use no memo"; // 选择不让此组件由 React Compiler 进行编译
- // ...
-}
-```
-
-
-#### `"use no memo"` {/*use-no-memo*/}
-
-`"use no memo"` 是一个**临时的**逃避机制，它允许你选择不让组件和钩子由 React Compiler 进行编译。此指令不像例如 [`"use client"`](/reference/rsc/use-client) 那样长期存在。
-
-除非绝对必要，否则不建议使用这个指令。一旦你选择退出一个组件或钩子，它将永久退出，直到指令被移除。这意味着即使你修复了代码，编译器仍然会跳过编译它，除非你移除指令。
-
-
-当你修复错误时，请确认删除退出指令是否会使问题重新出现。然后使用 [React Compiler Playground](https://playground.react.dev) 与我们分享一个错误报告（你可以尝试将其减少到一个小的重现，或者如果是开源代码，你也可以直接粘贴整个源代码），这样我们就可以识别并帮助解决问题。
-
-### 其他问题 {/*other-issues*/}
-
-请查阅 https://github.com/reactwg/react-compiler/discussions/7 。
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 22684cf3fa..65fff4ea04 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -176,16 +176,7 @@ React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码
npm install -D eslint-plugin-react-hooks@rc
-然后在你的 ESLint 配置中启用编译器规则：
-
-```js {3}
-// .eslintrc.js
-module.exports = {
- rules: {
- 'react-hooks/react-compiler': 'error',
- },
-};
-```
+如果你尚未配置好 eslint-plugin-react-hooks，参考 [readme 的安装说明来进行配置](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)。最新的 RC 版本中默认启用了编译器规则，因此不需要其他配置。
ESLint 规则将会：
- 识别对 [React 规则](/reference/rules) 的违反情况
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index 48b56d30b0..65d1ac66e8 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -28,7 +28,7 @@ React Compiler 会在构建时自动优化你的 React 应用。通常情况下
没有编译器的情况下，你需要手动对组件和值进行记忆化以优化重新渲染：
-```js
+```js {expectedErrors: {'react-compiler': [4]}}
import { useMemo, useCallback, memo } from 'react';
const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
@@ -50,6 +50,20 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
});
```
+
+
+This manual memoization has a subtle bug that breaks memoization:
+
+```js [[2, 1, "() => handleClick(item)"]]
+- handleClick(item)} />
+```
+
+Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization.
+
+React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes.
+
+
+
### 在使用 React 编译器之后 {/*after-react-compiler*/}
使用 React 编译器，你可以编写相同的代码而无需手动进行记忆化：
@@ -154,7 +168,7 @@ Next.js 用户可以通过使用 [v15.3.1](https://github.com/vercel/next.js/rel
## 关于 useMemo、useCallback 和 React.memo 我应该怎么做？ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
-如果你正在使用 React 编译器，可以移除 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo)。React 编译器能够比使用这些 Hook 更精确和细致地添加自动记忆化功能。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。
+React 编译器能够比手动使用 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo) 更精确和细致地添加自动记忆化。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。
这样做是出于谨慎考虑，因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如，为了防止无限循环，你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 409431a386..f95117744f 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -214,7 +214,7 @@ export default function Counter() {
-```js
+```js {expectedErrors: {'react-compiler': [13]}}
import { useRef } from 'react';
export default function Counter() {
@@ -316,7 +316,7 @@ console.log(ref.current); // 5
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
import { useState } from 'react';
export default function Chat() {
@@ -421,7 +421,7 @@ export default function Chat() {
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
import { useRef } from 'react';
export default function Toggle() {
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 271476ea53..0b3f0cc1f0 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -304,7 +304,7 @@ useEffect(() => {
-```js
+```js {expectedErrors: {'react-compiler': [14]}}
import { useState, useEffect } from 'react';
export default function Timer() {
@@ -795,7 +795,7 @@ function ChatRoom({ roomId }) {
-```js
+```js {expectedErrors: {'react-compiler': [10]}}
import { useState, useEffect } from 'react';
import { createConnection } from './chat.js';
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index a76a17393d..2d03902c27 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -551,7 +551,7 @@ button { margin-left: 5px; }
-```js
+```js {expectedErrors: {'react-compiler': [5, 7]}}
export default function LightSwitch() {
function handleClick() {
let bodyStyle = document.body.style;
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index 8a60040358..7b24f7b10f 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -1419,10 +1419,29 @@ function SaveButton() {
#### React 会为数据获取提供内置解决方案么？ {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
+Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`:
+
+```js {1,4,11}
+import { use, Suspense } from "react";
+
+function Message({ messagePromise }) {
+ const messageContent = use(messagePromise);
+ return ⌛Downloading message...}>
+
+ );
+}
+```
+
我们仍然在规划细节，但是期望未来可以像这样写数据获取：
```js {1,4,6}
-import { use } from 'react'; // 还不可用！
+import { use } from 'react';
function ShippingForm({ country }) {
const cities = use(fetch(`/api/cities?country=${country}`));
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index 7c155a36bf..44f95af854 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -711,7 +711,7 @@ function Page({ url }) {
在已经存在的代码库中，你可能有时会看见像这样的检查规则抑制：
-```js {7-9}
+```js {expectedErrors: {'react-compiler': [8]}} {7-9}
function Page({ url }) {
const { items } = useContext(ShoppingCartContext);
const numberOfItems = items.length;
@@ -735,7 +735,7 @@ function Page({ url }) {
-```js
+```js {expectedErrors: {'react-compiler': [16]}}
import { useState, useEffect } from 'react';
export default function App() {
@@ -990,7 +990,7 @@ Effect Event 是 Effect 代码的非响应式“片段”。他们应该在使
```
-```js
+```js {expectedErrors: {'react-compiler': [14]}}
import { useState, useEffect } from 'react';
export default function Timer() {
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md
deleted file mode 100644
index 8ca2d32dbf..0000000000
--- a/src/content/learn/start-a-new-react-project.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: 启动一个新的 React 项目
-translators:
- - watonyweng
- - QC-L
- - ZZZCNY
----
-
-
-
-如果你想完全用 React 构建一个新的应用或网站，我们建议选择社区中流行的、由 React 驱动的框架。
-
-
-
-
-你可以在没有框架的情况下使用 React，但是我们发现大多数应用程序和网站最终都会构建常见问题的解决方案，例如代码分割、路由、数据获取和生成 HTML。不仅仅是 React，这些问题对于所有 UI 库都很常见。
-
-从框架开始一个项目，你就可以快速使用 React，这样以后也不需要构建自己的框架。
-
-
-
-#### 我可以在没有框架的情况下使用 React 吗？ {/*can-i-use-react-without-a-framework*/}
-
-你当然可以在没有框架的情况下使用 React——这也就是你将 [使用 React 作为页面的一部分](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page)。**但是，如果你完全使用 React 构建新应用程序或网站，我们建议使用框架。**
-
-原因如下。
-
-即使你一开始不需要路由或数据获取，你也可能需要为它们添加一些库。随着 JavaScript 包随着每个新功能的增加而增长，你可能必须弄清楚如何单独拆分每个路由的代码。随着数据获取需求变得更加复杂，你可能会遇到服务器-客户端网络瀑布，这会让你的应用程序让人感觉非常缓慢。由于你的受众里面有更多网络条件较差和低端设备的用户，你可能需要从组件生成 HTML 以便尽早显示内容（无论是在服务器上还是在构建期间）。更改设定以在服务器上或构建期间运行某些代码可能非常棘手。
-
-**这些问题不是 React 特有的。这就是为什么 Svelte 有 SvelteKit、Vue 有 Nuxt 等等。要自己解决这些问题，需要将打包工具与路由和数据获取的库集成**。让初始设定正常工作并不难，但是要制作一个即使随着时间的推移而增长也能快速加载的应用程序，涉及到很多微妙之处。你需要发送最少量的应用程序代码，在单个客户端-服务器往返中执行此操作，与页面所需的任何数据并行。你可能希望页面在 JavaScript 代码运行之前就具有交互性，以支持渐进增强。你可能希望为你营销页面生成一个包含纯静态 HTML 文件的文件夹，该文件夹可以托管在任何地方，并且在禁用 JavaScript 的情况下仍然可以工作。自己构建这些东西需要付出实际的努力。
-
-此页面上的 React 框架默认解决此类问题，无需进行额外的工作。它们让你能够非常精简地开始，然后根据你的需求扩展应用程序。每个 React 框架都有一个社区，因此寻找问题的答案和升级工具变得更加容易。框架还为你的代码提供结构，帮助你和其他人保留不同项目之间的上下文和技巧。相反，使用自定义设置更容易陷入不受支持的依赖版本，并且你基本上最终会创建自己的框架——但这没有社区支持或升级路径（如果它和我们过去做的一样，设计得比较草率的话）。
-
-如果你的应用程序具有这些框架无法很好地满足的异常约束，或者你更喜欢自己解决这些问题，则可以使用 React 进行自己的自定义设置。从 npm 获取 `react` 和 `react-dom`，使用 [Vite](https://cn.vitejs.dev/) 或 [Parcel](https://parceljs.org/) 等打包工具设置自定义构建流程，并根据需要添加其他工具用于路由、静态内容生成或服务端渲染等。
-
-
-
-## 生产级的 React 框架 {/*production-grade-react-frameworks*/}
-
-这些框架支持在生产中部署和扩展应用程序所需的所有功能，并致力于支持我们的 [全栈架构愿景](#which-features-make-up-the-react-teams-full-stack-architecture-vision)。我们推荐的所有框架都是开源的，有活跃的社区支持，并且可以部署到你自己的服务器或托管服务提供商。如果你是一位框架作者，有兴趣加入此列表，[请告诉我们](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)。
-
-### Next.js {/*nextjs-pages-router*/}
-
-**[Next.js 的页面路由](https://nextjs.org/) 是一个全栈的 React 框架**。它用途广泛，可让你创建任何规模的 React 应用程序——从大部分的静态博客到复杂的动态应用程序。要创建新的 Next.js 项目，请在终端中运行：
-
-
-npx create-next-app@latest
-
-
-如果你是 Next.js 的新手，请查看 [Next.js 课程](https://nextjs.org/learn)。
-
-Next.js 由 [Vercel](https://vercel.com/) 维护。你可以 [将 Next.js 应用](https://nextjs.org/docs/app/building-your-application/deploying) 部署到 Node.js 或 serverless 上，也可以部署到你自己的服务器上。[完全静态的 Next.js 应用](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) 可以部署在任何支持静态服务的地方。
-
-### Remix {/*remix*/}
-
-**[Remix](https://remix.run/) 是一个具有嵌套路由的全栈式 React 框架**。它可以把你的应用分成嵌套部分，该嵌套部分可以并行加载数据并响应用户操作进行刷新。要创建一个新的 Remix 项目，请运行：
-
-
-npx create-remix
-
-
-如果你是 Remix 的新手，请查看 Remix 的 [博客教程](https://remix.run/docs/en/main/tutorials/blog)（短）和 [应用教程](https://remix.run/docs/en/main/tutorials/jokes)（长）。
-
-Remix 由 [Shopify](https://www.shopify.com/) 维护。当你创建一个 Remix 项目时，你需要 [选择你的部署目标](https://remix.run/docs/en/main/guides/deployment)。你可以通过使用或编写 [适配器](https://remix.run/docs/en/main/other-api/adapter) 将 Remix 应用部署到 Node.js 或 serverless 上进行托管。
-
-### Gatsby {/*gatsby*/}
-
-**[Gatsby](https://www.gatsbyjs.com/) 是一个快速的支持 CMS 的网站的 React 框架**。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务整合到一个网站的过程。要创建一个新的 Gatsby 项目，请运行：
-
-
-npx create-gatsby
-
-
-如果你是 Gatsby 的新手，请查看 [Gatsby 教程](https://www.gatsbyjs.com/docs/tutorial/)。
-
-Gatsby 由 [Netlify](https://www.netlify.com/) 维护。你可以 [部署一个完全静态的 Gatsby 网站](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) 到任何一个支持静态服务的地方。如果你选择使用服务器上的功能，请确保你的主机供应商支持 Gatsby 的功能。
-
-### Expo（用于原生应用） {/*expo*/}
-
-**[Expo](https://expo.dev/) 是一个 React 框架，可以让你创建具有真正原生 UI 的应用，包括 Android、iOS，以及 Web 应用**。它为 [React Native](https://reactnative.dev/) 提供了 SDK，使原生部分更容易使用。要创建一个新的 Expo 项目，请运行：
-
-
-npx create-expo-app
-
-
-如果你是 Expo 的新手，请查看 [Expo 教程](https://docs.expo.dev/tutorial/introduction/)。
-
-Expo 是由 [Expo 这家公司](https://expo.dev/about) 维护的。用 Expo 构建应用是免费的，而且你可以不受限制地将它们提交到谷歌和苹果的应用商店。此外，Expo 还提供选择性的付费云服务。
-
-## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/}
-
-在我们探索如何继续改进 React 的过程中，我们意识到将 React 与框架（特别是路由、bundle 和服务端技术）更紧密地结合起来是我们帮助 React 用户构建更好的应用的最大机会。Next.js 团队已经同意与我们合作，研究、开发、集成和测试与框架无关的 React 前沿功能，如 [React 服务器组件](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)。
-
-这些功能每天都在接近生产就绪，而且我们一直在与其他 bundler 和框架的开发者讨论整合它们。我们希望在一两年内，这个页面上列出的所有框架都能完全支持这些功能。（如果你是一个框架的作者，有兴趣与我们合作来实验这些功能，请告诉我们！）
-
-### Next.js (App Router) {/*nextjs-app-router*/}
-
-**[Next.js 的 App Router](https://nextjs.org/docs) 是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景**。它让你在异步组件中获取数据，这些组件甚至能在服务端构建过程中运行。
-
-Next.js 由 [Vercel](https://vercel.com/) 维护。你可以将 [Next.js 应用](https://nextjs.org/docs/app/building-your-application/deploying) 部署到 Node.js 或 serverless 主机上，或部署到你自己的服务器上。Next.js 还支持 [静态导出](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)，不需要服务器。
-
-
-
-#### 哪些功能构成了 React 团队的全栈架构愿景？ {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
-
-Next.js 的 App Router bundler 完全实现了官方的 [React 服务器组件规范](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md)。这让你可以在一棵 React 树上同时使用 *构建时*、*纯服务端* 和 *交互组件*。
-
-例如，你可以把一个纯服务端的 React 组件写成一个 `async` 函数，从数据库或文件中读取。然后你可以把数据从它那里传递给你的交互组件：
-
-```js
-// 这个组件只在服务端运行（或在构建期间）。
-async function Talks({ confId }) {
- // 1. 你在服务端，所以你可以和你的数据层对话。不需要 API 端点。
- const talks = await db.Talks.findAll({ confId });
-
- // 2. 添加任意数量的渲染逻辑。它不会使你的 JavaScript bundle 变大。
- const videos = talks.map(talk => talk.video);
-
- // 3. 将数据向下传递给将在浏览器中运行的组件。
- return
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 8fc701544c..fddd18c26b 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -26,7 +26,7 @@ translators:
-```js
+```js {expectedErrors: {'react-compiler': [7]}}
import { sculptureList } from './data.js';
export default function Gallery() {
@@ -1233,7 +1233,7 @@ img { width: 120px; height: 120px; }
-```js
+```js {expectedErrors: {'react-compiler': [6]}}
export default function Form() {
let firstName = '';
let lastName = '';
@@ -1341,7 +1341,7 @@ Hook 只允许在*什么地方* 调用？这个组件是否违反了任何规则
-```js
+```js {expectedErrors: {'react-compiler': [9]}}
import { useState } from 'react';
export default function FeedbackForm() {
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 85c2f3b4e2..cfe9323176 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -95,7 +95,7 @@ function VideoPlayer({ src, isPlaying }) {
-```js
+```js {expectedErrors: {'react-compiler': [7, 9]}}
import { useState, useRef, useEffect } from 'react';
function VideoPlayer({ src, isPlaying }) {
@@ -1468,7 +1468,8 @@ body {
-```js src/App.js
+{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
+```js {expectedErrors: {'react-compiler': [9]}} src/App.js
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
@@ -1541,7 +1542,8 @@ export async function fetchBio(person) {
-```js src/App.js
+{/* not the most efficient, but this validation is enabled in the linter only, so it's fine to ignore it here since we know what we're doing */}
+```js {expectedErrors: {'react-compiler': [9]}} src/App.js
import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';
@@ -1605,4 +1607,3 @@ export async function fetchBio(person) {
-
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 642391edc6..6ff0bfd290 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -283,7 +283,7 @@ body {
-1. _Files_ 部分列出了一些文件：`App.js`、`index.js`、`styles.css` 和 `public` 文件夹。
+1. _Files_ 部分列出了一些文件：`src` 文件夹中的 `App.js`、`index.js`、`styles.css` 文件和 `public` 文件夹。
2. _code editor_ 部分可以看到你所选中文件的源码。
3. _browser_ 部分可以预览代码的实时结果。
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index b24f0963e7..f203fc1815 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -32,13 +32,13 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ
使用下面命令安装最新版本的 React 类型定义：
-npm install @types/react @types/react-dom
+npm install --save-dev @types/react @types/react-dom
然后在 `tsconfig.json` 中设置以下编译器选项：
1. 必须在 [`lib`](https://www.typescriptlang.org/tsconfig/#lib) 中包含 `dom`（注意：如果没有指定 `lib` 选项，默认情况下会包含 `dom`）。
-1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。
+2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。
如果你正在发布一个库，请查阅 [`jsx` 文档](https://www.typescriptlang.org/tsconfig/#jsx) 以选择合适的值。
## 在 React 组件中使用 TypeScript {/*typescript-with-react-components*/}
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 42059584fd..08aa39edb0 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -59,7 +59,7 @@ position.x = 5;
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
import { useState } from 'react';
export default function MovingDot() {
@@ -213,7 +213,7 @@ setPosition({
-```js
+```js {expectedErrors: {'react-compiler': [11, 15, 19]}}
import { useState } from 'react';
export default function Form() {
@@ -836,7 +836,7 @@ img { width: 200px; height: 200px; }
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
import { useState } from 'react';
export default function Scoreboard() {
@@ -992,7 +992,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-```js src/App.js
+```js {expectedErrors: {'react-compiler': [17]}} src/App.js
import { useState } from 'react';
import Background from './Background.js';
import Box from './Box.js';
@@ -1297,7 +1297,7 @@ select { margin-bottom: 10px; }
-```js src/App.js
+```js {expectedErrors: {'react-compiler': [18]}} src/App.js
import { useState } from 'react';
import { useImmer } from 'use-immer';
import Background from './Background.js';
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 7b970e7040..dc86831451 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -34,7 +34,7 @@ Effect 是 React 范式中的一种脱围机制。它们让你可以 “逃出
假设你有一个包含了两个 state 变量的组件：`firstName` 和 `lastName`。你想通过把它们联结起来计算出 `fullName`。此外，每当 `firstName` 和 `lastName` 变化时，你希望 `fullName` 都能更新。你的第一直觉可能是添加一个 state 变量：`fullName`，并在一个 Effect 中更新它：
-```js {5-9}
+```js {expectedErrors: {'react-compiler': [8]}} {5-9}
function Form() {
const [firstName, setFirstName] = useState('Taylor');
const [lastName, setLastName] = useState('Swift');
@@ -66,7 +66,7 @@ function Form() {
这个组件使用它接收到的 props 中的 `filter` 对另一个 prop `todos` 进行筛选，计算得出 `visibleTodos`。你的直觉可能是把结果存到一个 state 中，并在 Effect 中更新它：
-```js {4-8}
+```js {expectedErrors: {'react-compiler': [7]}} {4-8}
function TodoList({ todos, filter }) {
const [newTodo, setNewTodo] = useState('');
@@ -165,7 +165,7 @@ console.timeEnd('筛选数组');
`ProfilePage` 组件接收一个 prop：`userId`。页面上有一个评论输入框，你用了一个 state：`comment` 来保存它的值。有一天，你发现了一个问题：当你从一个人的个人资料导航到另一个时，`comment` 没有被重置。这导致很容易不小心把评论发送到不正确的个人资料。为了解决这个问题，你想在 `userId` 变化时，清除 `comment` 变量：
-```js {4-7}
+```js {expectedErrors: {'react-compiler': [6]}} {4-7}
export default function ProfilePage({ userId }) {
const [comment, setComment] = useState('');
@@ -208,7 +208,7 @@ function Profile({ userId }) {
`List` 组件接收一个 `items` 列表作为 prop，然后用 state 变量 `selection` 来保持已选中的项。当 `items` 接收到一个不同的数组时，你想将 `selection` 重置为 `null`：
-```js {5-8}
+```js {expectedErrors: {'react-compiler': [7]}} {5-8}
function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selection, setSelection] = useState(null);
@@ -819,7 +819,7 @@ function useData(url) {
-```js
+```js {expectedErrors: {'react-compiler': [12, 16, 20]}}
import { useState, useEffect } from 'react';
import { initialTodos, createTodo } from './todos.js';
@@ -1022,7 +1022,7 @@ input { margin-top: 10px; }
-```js
+```js {expectedErrors: {'react-compiler': [11]}}
import { useState, useEffect } from 'react';
import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
@@ -1106,7 +1106,7 @@ input { margin-top: 10px; }
-```js
+```js {expectedErrors: {'react-compiler': [8]}}
import { useState, useMemo } from 'react';
import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
@@ -1363,7 +1363,7 @@ export default function ContactList({
}
```
-```js src/EditContact.js active
+```js {expectedErrors: {'react-compiler': [8, 9]}} src/EditContact.js active
import { useState, useEffect } from 'react';
export default function EditContact({ savedContact, onSave }) {
diff --git a/src/content/reference/eslint-plugin-react-hooks/index.md b/src/content/reference/eslint-plugin-react-hooks/index.md
new file mode 100644
index 0000000000..6494bd78f0
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/index.md
@@ -0,0 +1,37 @@
+---
+title: eslint-plugin-react-hooks
+---
+
+
+
+`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules).
+
+
+
+This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.
+
+
+When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app.
+
+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.
+
+
+## Available Lints {/*available-lints*/}
+
+* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates against higher order functions defining nested components or hooks
+* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
+* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
+* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
+* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - Validates configuration of gating mode
+* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - Validates against assignment/mutation of globals during render
+* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - Validates against mutating props, state, and other immutable values
+* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - Validates against usage of libraries which are incompatible with memoization
+* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - Validates that existing manual memoization is preserved by the compiler
+* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - Validates that components/hooks are pure by checking known-impure functions
+* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - Validates correct usage of refs, not reading/writing during render
+* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
+* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Validates against calling setState synchronously in an effect
+* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - Validates against setting state during render
+* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - Validates that components are static, not recreated every render
+* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - Validates against syntax that React Compiler does not support
+* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - Validates usage of the `useMemo` hook without a return value
\ No newline at end of file
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
new file mode 100644
index 0000000000..537903abdd
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
@@ -0,0 +1,102 @@
+---
+title: component-hook-factories
+---
+
+
+
+Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level.
+
+
+
+## Rule Details {/*rule-details*/}
+
+Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js {expectedErrors: {'react-compiler': [14]}}
+// ❌ Factory function creating components
+function createComponent(defaultValue) {
+ return function Component() {
+ // ...
+ };
+}
+
+// ❌ Component defined inside component
+function Parent() {
+ function Child() {
+ // ...
+ }
+
+ return
+
+Validates the compiler [configuration options](/reference/react-compiler/configuration).
+
+
+
+## Rule Details {/*rule-details*/}
+
+React Compiler accepts various [configuration options](/reference/react-compiler/configuration) to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js
+// ❌ Unknown option name
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ compileMode: 'all' // Typo: should be compilationMode
+ }]
+ ]
+};
+
+// ❌ Invalid option value
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ compilationMode: 'everything' // Invalid: use 'all' or 'infer'
+ }]
+ ]
+};
+```
+
+### Valid {/*valid*/}
+
+Examples of correct code for this rule:
+
+```js
+// ✅ Valid compiler configuration
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ compilationMode: 'infer',
+ panicThreshold: 'critical_errors'
+ }]
+ ]
+};
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Configuration not working as expected {/*config-not-working*/}
+
+Your compiler configuration might have typos or incorrect values:
+
+```js
+// ❌ Wrong: Common configuration mistakes
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ // Typo in option name
+ compilationMod: 'all',
+ // Wrong value type
+ panicThreshold: true,
+ // Unknown option
+ optimizationLevel: 'max'
+ }]
+ ]
+};
+```
+
+Check the [configuration documentation](/reference/react-compiler/configuration) for valid options:
+
+```js
+// ✅ Better: Valid configuration
+module.exports = {
+ plugins: [
+ ['babel-plugin-react-compiler', {
+ compilationMode: 'all', // or 'infer'
+ panicThreshold: 'none', // or 'critical_errors', 'all_errors'
+ // Only use documented options
+ }]
+ ]
+};
+```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
new file mode 100644
index 0000000000..830098e5be
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
@@ -0,0 +1,72 @@
+---
+title: error-boundaries
+---
+
+
+
+Validates usage of Error Boundaries instead of try/catch for errors in child components.
+
+
+
+## Rule Details {/*rule-details*/}
+
+Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.
+
+### Invalid {/*invalid*/}
+
+Examples of incorrect code for this rule:
+
+```js {expectedErrors: {'react-compiler': [4]}}
+// ❌ Try/catch won't catch render errors
+function Parent() {
+ try {
+ return
+
+ );
+}
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Why is the linter telling me not to wrap `use` in `try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
+
+The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run.
+
+```js {expectedErrors: {'react-compiler': [5]}}
+// ❌ Try/catch around `use` hook
+function Component({promise}) {
+ try {
+ const data = use(promise); // Won't catch - `use` suspends, not throws
+ return Failed to load }>
+ Loading...
}>
+ }
@@ -11465,6 +11465,14 @@ root.render(
## Activity {/*activity*/}
+
-
{catList.map((cat) => (
- {
const map = getMap();
map.set(cat, node);
@@ -265,7 +265,7 @@ export default function CatFriends() {
};
}}
>
-
+
))}
- {onlineCount} online
- {friends.map((friend) => (
-
- );
-}
-```
-[**在 React Compiler Playground 中查看此示例**](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
-
-React Compiler 会自动应用等效的手动记忆，确保只有应用的相关部分在状态发生变化时重新渲染，这有时被称为“细粒度反应”。在上面的例子中，React Compiler 确定 `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 0000000000..2314cde064
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
@@ -0,0 +1,161 @@
+---
+title: immutability
+---
+
+-
+ {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 0000000000..93b582b1e1
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
@@ -0,0 +1,93 @@
+---
+title: preserve-manual-memoization
+---
+
+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 0000000000..3108fdd89d
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
@@ -0,0 +1,115 @@
+---
+title: refs
+---
+
+{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 0000000000..6508fc867f
--- /dev/null
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md
@@ -0,0 +1,161 @@
+---
+title: rules-of-hooks
+---
+
+