diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml
index 1e086b9b7..fcac37738 100644
--- a/.github/workflows/analyze_comment.yml
+++ b/.github/workflows/analyze_comment.yml
@@ -6,8 +6,11 @@ on:
     types:
       - completed
 
-permissions: {}
-
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+  
 jobs:
   comment:
     runs-on: ubuntu-latest
diff --git a/next-env.d.ts b/next-env.d.ts
index 52e831b43..3cd7048ed 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index 6d6b53f92..c1cd16741 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,13 @@
     "prettier:diff": "yarn nit:source",
     "lint-heading-ids": "node scripts/headingIdLinter.js",
     "fix-headings": "node scripts/headingIdLinter.js --fix",
-    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss",
+    "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss deadlinks",
     "tsc": "tsc --noEmit",
     "start": "next start",
     "postinstall": "is-ci || husky install .husky",
     "check-all": "npm-run-all prettier lint:fix tsc rss",
-    "rss": "node scripts/generateRss.js"
+    "rss": "node scripts/generateRss.js",
+    "deadlinks": "node scripts/deadLinkChecker.js"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "2.13.5",
@@ -30,7 +31,6 @@
     "@radix-ui/react-context-menu": "^2.1.5",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
     "next": "15.1.0",
@@ -62,6 +62,7 @@
     "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "chalk": "4.1.2",
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
     "eslint-config-react-app": "^5.2.1",
diff --git a/scripts/deadLinkChecker.js b/scripts/deadLinkChecker.js
new file mode 100644
index 000000000..90593b878
--- /dev/null
+++ b/scripts/deadLinkChecker.js
@@ -0,0 +1,385 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const globby = require('globby');
+const chalk = require('chalk');
+
+const CONTENT_DIR = path.join(__dirname, '../src/content');
+const PUBLIC_DIR = path.join(__dirname, '../public');
+const fileCache = new Map();
+const anchorMap = new Map(); // Map<filepath, Set<anchorId>>
+const contributorMap = new Map(); // Map<anchorId, URL>
+const redirectMap = new Map(); // Map<source, destination>
+let errorCodes = new Set();
+
+async function readFileWithCache(filePath) {
+  if (!fileCache.has(filePath)) {
+    try {
+      const content = await fs.promises.readFile(filePath, 'utf8');
+      fileCache.set(filePath, content);
+    } catch (error) {
+      throw new Error(`Failed to read file ${filePath}: ${error.message}`);
+    }
+  }
+  return fileCache.get(filePath);
+}
+
+async function fileExists(filePath) {
+  try {
+    await fs.promises.access(filePath, fs.constants.R_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getMarkdownFiles() {
+  // Convert Windows paths to POSIX for globby compatibility
+  const baseDir = CONTENT_DIR.replace(/\\/g, '/');
+  const patterns = [
+    path.posix.join(baseDir, '**/*.md'),
+    path.posix.join(baseDir, '**/*.mdx'),
+  ];
+  return globby.sync(patterns);
+}
+
+function extractAnchorsFromContent(content) {
+  const anchors = new Set();
+
+  // MDX-style heading IDs: {/*anchor-id*/}
+  const mdxPattern = /\{\/\*([a-zA-Z0-9-_]+)\*\/\}/g;
+  let match;
+  while ((match = mdxPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // HTML id attributes
+  const htmlIdPattern = /\sid=["']([a-zA-Z0-9-_]+)["']/g;
+  while ((match = htmlIdPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  // Markdown heading with explicit ID: ## Heading {#anchor-id}
+  const markdownHeadingPattern = /^#+\s+.*\{#([a-zA-Z0-9-_]+)\}/gm;
+  while ((match = markdownHeadingPattern.exec(content)) !== null) {
+    anchors.add(match[1].toLowerCase());
+  }
+
+  return anchors;
+}
+
+async function buildAnchorMap(files) {
+  for (const filePath of files) {
+    const content = await readFileWithCache(filePath);
+    const anchors = extractAnchorsFromContent(content);
+    if (anchors.size > 0) {
+      anchorMap.set(filePath, anchors);
+    }
+  }
+}
+
+function extractLinksFromContent(content) {
+  const linkPattern = /\[([^\]]*)\]\(([^)]+)\)/g;
+  const links = [];
+  let match;
+
+  while ((match = linkPattern.exec(content)) !== null) {
+    const [, linkText, linkUrl] = match;
+    if (linkUrl.startsWith('/') && !linkUrl.startsWith('//')) {
+      const lines = content.substring(0, match.index).split('\n');
+      const line = lines.length;
+      const lastLineStart =
+        lines.length > 1 ? content.lastIndexOf('\n', match.index - 1) + 1 : 0;
+      const column = match.index - lastLineStart + 1;
+
+      links.push({
+        text: linkText,
+        url: linkUrl,
+        line,
+        column,
+      });
+    }
+  }
+
+  return links;
+}
+
+async function findTargetFile(urlPath) {
+  // Check if it's an image or static asset that might be in the public directory
+  const imageExtensions = [
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.svg',
+    '.ico',
+    '.webp',
+  ];
+  const hasImageExtension = imageExtensions.some((ext) =>
+    urlPath.toLowerCase().endsWith(ext)
+  );
+
+  if (hasImageExtension || urlPath.includes('.')) {
+    // Check in public directory (with and without leading slash)
+    const publicPaths = [
+      path.join(PUBLIC_DIR, urlPath),
+      path.join(PUBLIC_DIR, urlPath.substring(1)),
+    ];
+
+    for (const p of publicPaths) {
+      if (await fileExists(p)) {
+        return p;
+      }
+    }
+  }
+
+  const possiblePaths = [
+    path.join(CONTENT_DIR, urlPath + '.md'),
+    path.join(CONTENT_DIR, urlPath + '.mdx'),
+    path.join(CONTENT_DIR, urlPath, 'index.md'),
+    path.join(CONTENT_DIR, urlPath, 'index.mdx'),
+    // Without leading slash
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1) + '.mdx'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.md'),
+    path.join(CONTENT_DIR, urlPath.substring(1), 'index.mdx'),
+  ];
+
+  for (const p of possiblePaths) {
+    if (await fileExists(p)) {
+      return p;
+    }
+  }
+  return null;
+}
+
+async function validateLink(link) {
+  const urlAnchorPattern = /#([a-zA-Z0-9-_]+)$/;
+  const anchorMatch = link.url.match(urlAnchorPattern);
+  const urlWithoutAnchor = link.url.replace(urlAnchorPattern, '');
+
+  if (urlWithoutAnchor === '/') {
+    return {valid: true};
+  }
+
+  // Check for redirects
+  if (redirectMap.has(urlWithoutAnchor)) {
+    const redirectDestination = redirectMap.get(urlWithoutAnchor);
+    if (
+      redirectDestination.startsWith('http://') ||
+      redirectDestination.startsWith('https://')
+    ) {
+      return {valid: true};
+    }
+    const redirectedLink = {
+      ...link,
+      url: redirectDestination + (anchorMatch ? anchorMatch[0] : ''),
+    };
+    return validateLink(redirectedLink);
+  }
+
+  // Check if it's an error code link
+  const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/);
+  if (errorCodeMatch) {
+    const code = errorCodeMatch[1];
+    if (!errorCodes.has(code)) {
+      return {
+        valid: false,
+        reason: `Error code ${code} not found in React error codes`,
+      };
+    }
+    return {valid: true};
+  }
+
+  // Check if it's a contributor link on the team or acknowledgements page
+  if (
+    anchorMatch &&
+    (urlWithoutAnchor === '/community/team' ||
+      urlWithoutAnchor === '/community/acknowledgements')
+  ) {
+    const anchorId = anchorMatch[1].toLowerCase();
+    if (contributorMap.has(anchorId)) {
+      const correctUrl = contributorMap.get(anchorId);
+      if (correctUrl !== link.url) {
+        return {
+          valid: false,
+          reason: `Contributor link should be updated to: ${correctUrl}`,
+        };
+      }
+      return {valid: true};
+    } else {
+      return {
+        valid: false,
+        reason: `Contributor link not found`,
+      };
+    }
+  }
+
+  const targetFile = await findTargetFile(urlWithoutAnchor);
+
+  if (!targetFile) {
+    return {
+      valid: false,
+      reason: `Target file not found for: ${urlWithoutAnchor}`,
+    };
+  }
+
+  // Only check anchors for content files, not static assets
+  if (anchorMatch && targetFile.startsWith(CONTENT_DIR)) {
+    const anchorId = anchorMatch[1].toLowerCase();
+
+    // TODO handle more special cases. These are usually from custom MDX components that include
+    // a Heading from src/components/MDX/Heading.tsx which automatically injects an anchor tag.
+    switch (anchorId) {
+      case 'challenges':
+      case 'recap': {
+        return {valid: true};
+      }
+    }
+
+    const fileAnchors = anchorMap.get(targetFile);
+
+    if (!fileAnchors || !fileAnchors.has(anchorId)) {
+      return {
+        valid: false,
+        reason: `Anchor #${anchorMatch[1]} not found in ${path.relative(
+          CONTENT_DIR,
+          targetFile
+        )}`,
+      };
+    }
+  }
+
+  return {valid: true};
+}
+
+async function processFile(filePath) {
+  const content = await readFileWithCache(filePath);
+  const links = extractLinksFromContent(content);
+  const deadLinks = [];
+
+  for (const link of links) {
+    const result = await validateLink(link);
+    if (!result.valid) {
+      deadLinks.push({
+        file: path.relative(process.cwd(), filePath),
+        line: link.line,
+        column: link.column,
+        text: link.text,
+        url: link.url,
+        reason: result.reason,
+      });
+    }
+  }
+
+  return {deadLinks, totalLinks: links.length};
+}
+
+async function buildContributorMap() {
+  const teamFile = path.join(CONTENT_DIR, 'community/team.md');
+  const teamContent = await readFileWithCache(teamFile);
+
+  const teamMemberPattern = /<TeamMember[^>]*permalink=["']([^"']+)["']/g;
+  let match;
+
+  while ((match = teamMemberPattern.exec(teamContent)) !== null) {
+    const permalink = match[1];
+    contributorMap.set(permalink, `/community/team#${permalink}`);
+  }
+
+  const ackFile = path.join(CONTENT_DIR, 'community/acknowledgements.md');
+  const ackContent = await readFileWithCache(ackFile);
+  const contributorPattern = /\*\s*\[([^\]]+)\]\(([^)]+)\)/g;
+
+  while ((match = contributorPattern.exec(ackContent)) !== null) {
+    const name = match[1];
+    const url = match[2];
+    const hyphenatedName = name.toLowerCase().replace(/\s+/g, '-');
+    if (!contributorMap.has(hyphenatedName)) {
+      contributorMap.set(hyphenatedName, url);
+    }
+  }
+}
+
+async function fetchErrorCodes() {
+  try {
+    const response = await fetch(
+      'https://raw.githubusercontent.com/facebook/react/main/scripts/error-codes/codes.json'
+    );
+    if (!response.ok) {
+      throw new Error(`Failed to fetch error codes: ${response.status}`);
+    }
+    const codes = await response.json();
+    errorCodes = new Set(Object.keys(codes));
+    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
+  } catch (error) {
+    throw new Error(`Failed to fetch error codes: ${error.message}`);
+  }
+}
+
+async function buildRedirectsMap() {
+  try {
+    const vercelConfigPath = path.join(__dirname, '../vercel.json');
+    const vercelConfig = JSON.parse(
+      await fs.promises.readFile(vercelConfigPath, 'utf8')
+    );
+
+    if (vercelConfig.redirects) {
+      for (const redirect of vercelConfig.redirects) {
+        redirectMap.set(redirect.source, redirect.destination);
+      }
+      console.log(
+        chalk.gray(`Loaded ${redirectMap.size} redirects from vercel.json`)
+      );
+    }
+  } catch (error) {
+    console.log(
+      chalk.yellow(
+        `Warning: Could not load redirects from vercel.json: ${error.message}\n`
+      )
+    );
+  }
+}
+
+async function main() {
+  const files = getMarkdownFiles();
+  console.log(chalk.gray(`Checking ${files.length} markdown files...`));
+
+  await fetchErrorCodes();
+  await buildRedirectsMap();
+  await buildContributorMap();
+  await buildAnchorMap(files);
+
+  const filePromises = files.map((filePath) => processFile(filePath));
+  const results = await Promise.all(filePromises);
+  const deadLinks = results.flatMap((r) => r.deadLinks);
+  const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);
+
+  if (deadLinks.length > 0) {
+    console.log('\n');
+    for (const link of deadLinks) {
+      console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));
+      console.log(chalk.reset(`  Link text: ${link.text}`));
+      console.log(chalk.reset(`  URL: ${link.url}`));
+      console.log(`  ${chalk.red('✗')} ${chalk.red(link.reason)}\n`);
+    }
+
+    console.log(
+      chalk.red(
+        `\nFound ${deadLinks.length} dead link${
+          deadLinks.length > 1 ? 's' : ''
+        } out of ${totalLinks} total links\n`
+      )
+    );
+    process.exit(1);
+  }
+
+  console.log(chalk.green(`\n✓ All ${totalLinks} links are valid!\n`));
+  process.exit(0);
+}
+
+main().catch((error) => {
+  console.log(chalk.red(`Error: ${error.message}`));
+  process.exit(1);
+});
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 83f5fa4f2..12fe32106 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -755,9 +755,7 @@ function CommunityGallery() {
   }, []);
 
   return (
-    <div
-      ref={ref}
-      className="relative flex overflow-x-hidden overflow-y-visible w-auto">
+    <div ref={ref} className="relative flex overflow-x-clip w-auto">
       <div
         className="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee"
         style={{
@@ -784,21 +782,26 @@ const CommunityImages = memo(function CommunityImages({isLazy}) {
         <div
           key={i}
           className={cn(
-            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative`
+            `group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl`
           )}>
           <div
             className={cn(
-              'h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300',
+              'h-auto rounded-2xl before:rounded-2xl before:absolute before:pointer-events-none before:inset-0 before:transition-opacity before:-z-1 before:shadow-lg lg:before:shadow-2xl before:opacity-0 before:group-hover:opacity-100  transition-transform ease-in-out duration-300',
               i % 2 === 0
-                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl'
-                : 'group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]'
+                ? 'rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110'
+                : 'group-hover:rotate-1 group-hover:scale-110 rotate-[-2deg]'
             )}>
-            <img
-              loading={isLazy ? 'lazy' : 'eager'}
-              src={src}
-              alt={alt}
-              className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
-            />
+            <div
+              className={cn(
+                'overflow-clip relative before:absolute before:inset-0 before:pointer-events-none before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-transform ease-in-out duration-300'
+              )}>
+              <img
+                loading={isLazy ? 'lazy' : 'eager'}
+                src={src}
+                alt={alt}
+                className="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"
+              />
+            </div>
           </div>
         </div>
       ))}
@@ -1172,7 +1175,7 @@ async function Talks({ confId }) {
         </CodeBlock>
       }
       right={
-        <NavContext.Provider value={{slug, navigate}}>
+        <NavContext value={{slug, navigate}}>
           <BrowserChrome
             domain="example.com"
             path={'confs/' + slug}
@@ -1192,7 +1195,7 @@ async function Talks({ confId }) {
               </Suspense>
             </ExamplePanel>
           </BrowserChrome>
-        </NavContext.Provider>
+        </NavContext>
       }
     />
   );
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index ec3a6eba0..c3224e517 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -82,11 +82,9 @@ export function Page({
               'max-w-7xl mx-auto',
               section === 'blog' && 'lg:flex lg:flex-col lg:items-center'
             )}>
-            <TocContext.Provider value={toc}>
-              <LanguagesContext.Provider value={languages}>
-                {children}
-              </LanguagesContext.Provider>
-            </TocContext.Provider>
+            <TocContext value={toc}>
+              <LanguagesContext value={languages}>{children}</LanguagesContext>
+            </TocContext>
           </div>
           {!isBlogIndex && (
             <DocsPageFooter
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index cc5c654e3..a4b431189 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -266,7 +266,9 @@ export default function TopNav({
               <BrandMenu>
                 <div className="flex items-center">
                   <div className="uwu-visible flex items-center justify-center h-full">
-                    <NextLink href="/">
+                    <NextLink
+                      href="/"
+                      className="active:scale-95 transition-transform">
                       <Image
                         alt="logo by @sawaratsuki1004"
                         title="logo by @sawaratsuki1004"
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index c5896a7ab..a16c849aa 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -354,7 +354,7 @@ function IllustrationBlock({
     </figure>
   ));
   return (
-    <IllustrationContext.Provider value={isInBlockTrue}>
+    <IllustrationContext value={isInBlockTrue}>
       <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
         {sequential ? (
           <ol className="mdx-illustration-block flex">
@@ -369,7 +369,7 @@ function IllustrationBlock({
         )}
         <AuthorCredit author={author} authorLink={authorLink} />
       </div>
-    </IllustrationContext.Provider>
+    </IllustrationContext>
   );
 }
 
diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx
new file mode 100644
index 000000000..868f9fb66
--- /dev/null
+++ b/src/components/MDX/Sandpack/ClearButton.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {IconClose} from '../../Icon/IconClose';
+export interface ClearButtonProps {
+  onClear: () => void;
+}
+
+export function ClearButton({onClear}: ClearButtonProps) {
+  return (
+    <button
+      className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
+      onClick={onClear}
+      title="Clear all edits and reload sandbox"
+      type="button">
+      <IconClose className="inline mx-1 relative" />
+      <span className="hidden md:block">Clear</span>
+    </button>
+  );
+}
diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx
index bf2c3186c..d115868dd 100644
--- a/src/components/MDX/Sandpack/NavigationBar.tsx
+++ b/src/components/MDX/Sandpack/NavigationBar.tsx
@@ -17,7 +17,8 @@ import {
   useSandpackNavigation,
 } from '@codesandbox/sandpack-react/unstyled';
 import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton';
-import {ResetButton} from './ResetButton';
+import {ReloadButton} from './ReloadButton';
+import {ClearButton} from './ClearButton';
 import {DownloadButton} from './DownloadButton';
 import {IconChevron} from '../../Icon/IconChevron';
 import {Listbox} from '@headlessui/react';
@@ -95,7 +96,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     // 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 +104,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
      *
      * 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 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
         className="px-3 flex items-center justify-end text-start"
         translate="yes">
         <DownloadButton providedFiles={providedFiles} />
-        <ResetButton onReset={handleReset} />
+        <ReloadButton onReload={handleReload} />
+        <ClearButton onClear={handleClear} />
         <OpenInCodeSandboxButton />
         {activeFile.endsWith('.tsx') && (
           <OpenInTypeScriptPlaygroundButton
diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ReloadButton.tsx
similarity index 53%
rename from src/components/MDX/Sandpack/ResetButton.tsx
rename to src/components/MDX/Sandpack/ReloadButton.tsx
index 0d1e22c80..f828a6c2d 100644
--- a/src/components/MDX/Sandpack/ResetButton.tsx
+++ b/src/components/MDX/Sandpack/ReloadButton.tsx
@@ -4,18 +4,19 @@
 
 import * as React from 'react';
 import {IconRestart} from '../../Icon/IconRestart';
-export interface ResetButtonProps {
-  onReset: () => void;
+export interface ReloadButtonProps {
+  onReload: () => void;
 }
 
-export function ResetButton({onReset}: ResetButtonProps) {
+export function ReloadButton({onReload}: ReloadButtonProps) {
   return (
     <button
       className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
-      onClick={onReset}
-      title="Reset Sandbox"
+      onClick={onReload}
+      title="Keep your edits and reload sandbox"
       type="button">
-      <IconRestart className="inline mx-1 relative" /> Reset
+      <IconRestart className="inline mx-1 relative" />
+      <span className="hidden md:block">Reload</span>
     </button>
   );
 }
diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index ffe761624..9ec330e6b 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -107,7 +107,7 @@ Activity is still under research and our remaining work is to finalize the primi
 
 In addition to this update, our team has presented at conferences and made appearances on podcasts to speak more on our work and answer questions.
 
-- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+- [Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
 
 - [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled “React from Another Dimension” which explores an alternative history of how React Server Components and Actions could have been created
 
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
index 58e6b24aa..cd49b6eb2 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -72,11 +72,11 @@ Or, if you're using Yarn:
 yarn add -D eslint-plugin-react-compiler@beta
 </TerminalBlock>
 
-After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
+After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler/installation#eslint-integration). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released.
 
 ## Backwards Compatibility {/*backwards-compatibility*/}
 
-React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out 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](/learn/react-compiler#using-react-compiler-with-react-17-or-18).
+React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out 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](/reference/react-compiler/configuration#react-17-18).
 
 ## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/}
 
@@ -86,7 +86,7 @@ React Compiler can also be used to compile libraries. Because React Compiler nee
 
 Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
 
-[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries)
+[You can find more docs on this here.](/reference/react-compiler/compiling-libraries)
 
 ## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/}
 
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index aac80a44f..65bf42757 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish
 
 <Note>
 
-`refs` passed to classes are not passed as props since they reference the component instance.
+`ref`s passed to classes are not passed as props since they reference the component instance.
 
 </Note>
 
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 ecbbb8747..2ebbf3bae 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
 <TerminalBlock>
-{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`npm install --save-dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 pnpm
 <TerminalBlock>
-{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`pnpm add --save-dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 yarn
 <TerminalBlock>
-{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`}
+{`yarn add --dev eslint-plugin-react-hooks@rc`}
 </TerminalBlock>
 
 ```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 e4bb25a4a..0f54d02b4 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
@@ -2495,7 +2495,7 @@ For example, we can slow down the `default` cross fade animation:
 </ViewTransition>
 ```
 
-And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes):
+And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class):
 
 ```css
 ::view-transition-old(.slow-fade) {
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index a2bcd196e..581046a8c 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,41 +10,16 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### CityJS London 2025 {/*cityjs-london*/}
-April 23 - 25, 2025. In-person in London, UK 
-
-[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) -  [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
-
-### App.js Conf 2025 {/*appjs-conf-2025*/}
-May 28 - 30, 2025. In-person in Kraków, Poland + remote
-
-[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
-
-### CityJS Athens 2025 {/*cityjs-athens*/}
-May 27 - 31, 2025. In-person in Athens, Greece
-
-[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
-
-### React Norway 2025 {/*react-norway-2025*/}
-June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
-
-[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
-
-### React Summit 2025 {/*react-summit-2025*/}
-June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
-
-[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
-
-### React Nexus 2025 {/*react-nexus-2025*/}
-July 03 - 05, 2025. In-person in Bangalore, India
-
-[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
-
 ### React Universe Conf 2025 {/*react-universe-conf-2025*/}
 September 2-4, 2025. Wrocław, Poland.
 
 [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
 
+### React Alicante 2025 {/*react-alicante-2025*/}
+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)
+
 ### React Conf 2025 {/*react-conf-2025*/}
 October 7-8, 2025. Henderson, Nevada, USA and free livestream
 
@@ -55,6 +30,12 @@ October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15
 
 [Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
 
+
+### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
+November 6-7,  2025. In-person in New Delhi, India
+
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
 ### React Summit US 2025 {/*react-summit-us-2025*/}
 November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
 
@@ -65,13 +46,49 @@ November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
 
 [Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
 
+### React Paris 2026 {/*react-paris-2026*/}
+March 26 - 27, 2026. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+
 
 ## Past Conferences {/*past-conferences*/}
 
+
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) -  [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
 ### React Paris 2025 {/*react-paris-2025*/}
 March 20 - 21, 2025. In-person in Paris, France (hybrid event)
 
-[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
 
 ### React Native Connection 2025 {/*react-native-connection-2025*/}
 April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 81fc5c210..479ae50d4 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Mumbai](https://reactmumbai.dev)
 * [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
 
 ## Indonesia {/*indonesia*/}
 * [Indonesia](https://www.meetup.com/reactindonesia/)
@@ -136,9 +137,6 @@ 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-Scotland/)
-
 ## Spain {/*spain*/}
 * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
 
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 4684fb5b0..5d3d44005 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -24,7 +24,7 @@ Here's how we recommend to set it up:
 2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
 3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
 
-This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
+This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
 
 Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
 
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 6d4f55763..70049e58e 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -175,7 +175,7 @@ function Cup({ guest }) {
 }
 
 export default function TeaGathering() {
-  let cups = [];
+  const cups = [];
   for (let i = 1; i <= 12; i++) {
     cups.push(<Cup key={i} guest={i} />);
   }
@@ -245,7 +245,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t
 
 ```js src/Clock.js active
 export default function Clock({ time }) {
-  let hours = time.getHours();
+  const hours = time.getHours();
   if (hours >= 0 && hours <= 6) {
     document.getElementById('time').className = 'night';
   } else {
@@ -307,7 +307,7 @@ You can fix this component by calculating the `className` and including it in th
 
 ```js src/Clock.js active
 export default function Clock({ time }) {
-  let hours = time.getHours();
+  const hours = time.getHours();
   let className;
   if (hours >= 0 && hours <= 6) {
     className = 'night';
@@ -606,14 +606,14 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
-let initialStories = [
+const initialStories = [
   {id: 0, label: "Ankit's Story" },
   {id: 1, label: "Taylor's Story" },
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // HACK: Prevent the memory from growing forever while you read docs.
   // We're breaking our own rules here.
@@ -702,14 +702,14 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
-let initialStories = [
+const initialStories = [
   {id: 0, label: "Ankit's Story" },
   {id: 1, label: "Taylor's Story" },
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // HACK: Prevent the memory from growing forever while you read docs.
   // We're breaking our own rules here.
@@ -770,7 +770,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo
 ```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
   // Copy the array!
-  let storiesToDisplay = stories.slice();
+  const storiesToDisplay = stories.slice();
 
   // Does not affect the original array:
   storiesToDisplay.push({
@@ -794,14 +794,14 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
-let initialStories = [
+const initialStories = [
   {id: 0, label: "Ankit's Story" },
   {id: 1, label: "Taylor's Story" },
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // HACK: Prevent the memory from growing forever while you read docs.
   // We're breaking our own rules here.
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 93bcc10fd..ef7b76e04 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -741,9 +741,9 @@ export default function Section({ children }) {
   const level = useContext(LevelContext);
   return (
     <section className="section">
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -836,13 +836,11 @@ export function TasksProvider({ children }) {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider
-        value={dispatch}
-      >
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
deleted file mode 100644
index 9d4e19d21..000000000
--- a/src/content/learn/react-compiler.md
+++ /dev/null
@@ -1,346 +0,0 @@
----
-title: React Compiler
----
-
-<Intro>
-This page will give you an introduction to React Compiler and how to try it out successfully.
-</Intro>
-
-<YouWillLearn>
-
-* Getting started with the compiler
-* Installing the compiler and ESLint plugin
-* Troubleshooting
-
-</YouWillLearn>
-
-<Note>
-React Compiler is a new compiler currently in RC, that we've open sourced to get feedback from the community. We now recommend everyone to try the compiler and provide feedback.
-
-The latest RC release can be found with the `@rc` tag, and daily experimental releases with `@experimental`.
-</Note>
-
-React Compiler is a new compiler that we've open sourced to get feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
-
-eslint-plugin-react-hooks also includes an [ESLint rule](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
-
-The compiler is currently released as `rc`, and is available to try out on React 17+ apps and libraries. To install the RC:
-
-<TerminalBlock>
-{`npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
-</TerminalBlock>
-
-Or, if you're using Yarn:
-
-<TerminalBlock>
-{`yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1`}
-</TerminalBlock>
-
-If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions.
-
-### What does the compiler do? {/*what-does-the-compiler-do*/}
-
-In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as `useMemo`, `useCallback`, and `React.memo`. With these APIs you can tell React that certain parts of your application don't need to recompute if their inputs haven't changed, reducing work on updates. While powerful, it's easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don't have any _meaningful_ changes.
-
-The compiler uses its knowledge of JavaScript and React's rules to automatically memoize values or groups of values within your components and hooks. If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
-
-<Note>
-React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase.
-</Note>
-
-If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
-
-<DeepDive>
-#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
-
-The initial release of React Compiler is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
-
-1. **Skipping cascading re-rendering of components**
-    * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
-1. **Skipping expensive calculations from outside of React**
-    * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
-
-#### Optimizing Re-renders {/*optimizing-re-renders*/}
-
-React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
-
-```javascript
-function FriendList({ friends }) {
-  const onlineCount = useFriendOnlineCount();
-  if (friends.length === 0) {
-    return <NoFriends />;
-  }
-  return (
-    <div>
-      <span>{onlineCount} online</span>
-      {friends.map((friend) => (
-        <FriendListCard key={friend.id} friend={friend} />
-      ))}
-      <MessageButton />
-    </div>
-  );
-}
-```
-[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
-
-React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
-
-#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
-
-The compiler can also automatically memoize for expensive calculations used during rendering:
-
-```js
-// **Not** memoized by React Compiler, since this is not a component or hook
-function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
-
-// Memoized by React Compiler since this is a component
-function TableContainer({ items }) {
-  // This function call would be memoized:
-  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
-  // ...
-}
-```
-[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
-
-However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
-
-- React Compiler only memoizes React components and hooks, not every function
-- React Compiler's memoization is not shared across multiple components or hooks
-
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
-</DeepDive>
-
-### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
-
-The compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
-
-**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better.
-
-## Getting Started {/*getting-started*/}
-
-In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
-
-### Installing eslint-plugin-react-hooks {/*installing-eslint-plugin-react-compiler*/}
-
-React Compiler also powers an ESLint plugin. You can try it out by installing eslint-plugin-react-hooks@^6.0.0-rc.1.
-
-<TerminalBlock>
-{`npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1`}
-</TerminalBlock>
-
-See our [editor setup](/learn/editor-setup#linting) guide for more details.
-
-The ESLint plugin will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase.
-
-<Note>
-**You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized, but it is not required to fix everything before you can use the compiler.
-</Note>
-
-### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
-
-#### Existing projects {/*existing-projects*/}
-The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior.
-
-For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories:
-
-```js {3}
-const ReactCompilerConfig = {
-  sources: (filename) => {
-    return filename.indexOf('src/path/to/dir') !== -1;
-  },
-};
-```
-
-When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
-
-#### New projects {/*new-projects*/}
-
-If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
-
-### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
-
-React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
-
-<TerminalBlock>
-{`npm install react-compiler-runtime@rc`}
-</TerminalBlock>
-
-You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
-
-```js {3}
-// babel.config.js
-const ReactCompilerConfig = {
-  target: '18' // '17' | '18' | '19'
-};
-
-module.exports = function () {
-  return {
-    plugins: [
-      ['babel-plugin-react-compiler', ReactCompilerConfig],
-    ],
-  };
-};
-```
-
-### Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
-
-React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
-
-Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
-
-Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
-
-Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
-
-## Usage {/*installation*/}
-
-### Babel {/*usage-with-babel*/}
-
-<TerminalBlock>
-{`npm install babel-plugin-react-compiler@rc`}
-</TerminalBlock>
-
-The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
-
-After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline:
-
-```js {7}
-// babel.config.js
-const ReactCompilerConfig = { /* ... */ };
-
-module.exports = function () {
-  return {
-    plugins: [
-      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
-      // ...
-    ],
-  };
-};
-```
-
-`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
-
-### Vite {/*usage-with-vite*/}
-
-If you use Vite, you can add the plugin to 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*/}
-
-Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
-
-### Remix {/*usage-with-remix*/}
-Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
-
-<TerminalBlock>
-{`npm install vite-plugin-babel`}
-</TerminalBlock>
-
-```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"], // if you use TypeScript
-        plugins: [
-          ["babel-plugin-react-compiler", ReactCompilerConfig],
-        ],
-      },
-    }),
-  ],
-});
-```
-
-### Webpack {/*usage-with-webpack*/}
-
-A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
-
-### Expo {/*usage-with-expo*/}
-
-Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
-
-### Metro (React Native) {/*usage-with-react-native-metro*/}
-
-React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
-
-### Rspack {/*usage-with-rspack*/}
-
-Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
-
-### Rsbuild {/*usage-with-rsbuild*/}
-
-Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
-
-## Troubleshooting {/*troubleshooting*/}
-
-To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report. You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo.
-
-You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler).
-
-### What does the compiler assume? {/*what-does-the-compiler-assume*/}
-
-React Compiler assumes that your code:
-
-1. Is valid, semantic JavaScript.
-2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`.
-3. Follows the [Rules of React](https://react.dev/reference/rules).
-
-React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
-
-### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
-
-[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
-
-### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
-If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
-
-Due to the flexible and dynamic nature of JavaScript however, it's not possible to comprehensively detect all cases. Bugs and undefined behavior such as infinite loops may occur in those cases.
-
-If your app doesn't work properly after compilation and you aren't seeing any ESLint errors, the compiler may be incorrectly compiling your code. To confirm this, try to make the issue go away by aggressively opting out any component or hook you think might be related via the [`"use no memo"` directive](#opt-out-of-the-compiler-for-a-component).
-
-```js {2}
-function SuspiciousComponent() {
-  "use no memo"; // opts out this component from being compiled by React Compiler
-  // ...
-}
-```
-
-<Note>
-#### `"use no memo"` {/*use-no-memo*/}
-
-`"use no memo"` is a _temporary_ escape hatch that lets you opt-out components and hooks from being compiled by the React Compiler. This directive is not meant to be long lived the same way as eg [`"use client"`](/reference/rsc/use-client) is.
-
-It is not recommended to reach for this directive unless it's strictly necessary. Once you opt-out a component or hook, it is opted-out forever until the directive is removed. This means that even if you fix the code, the compiler will still skip over compiling it unless you remove the directive.
-</Note>
-
-When you make the error go away, confirm that removing the opt out directive makes the issue come back. Then share a bug report with us (you can try to reduce it to a small repro, or if it's open source code you can also just paste the entire source) using the [React Compiler Playground](https://playground.react.dev) so we can identify and help fix the issue.
-
-### Other issues {/*other-issues*/}
-
-Please see https://github.com/reactwg/react-compiler/discussions/7.
diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
new file mode 100644
index 000000000..1883125a6
--- /dev/null
+++ b/src/content/learn/react-compiler/debugging.md
@@ -0,0 +1,93 @@
+---
+title: Debugging and Troubleshooting
+---
+
+<Intro>
+This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues.
+</Intro>
+
+<YouWillLearn>
+
+* The difference between compiler errors and runtime issues
+* Common patterns that break compilation
+* Step-by-step debugging workflow
+
+</YouWillLearn>
+
+## Understanding Compiler Behavior {/*understanding-compiler-behavior*/}
+
+React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior.
+
+### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/}
+
+**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail.
+
+**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped.
+
+When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur.
+
+
+## Common Breaking Patterns {/*common-breaking-patterns*/}
+
+One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.
+
+Common scenarios where this occurs:
+
+- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders
+- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
+- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization
+
+## Debugging Workflow {/*debugging-workflow*/}
+
+Follow these steps when you encounter issues:
+
+### Compiler Build Errors {/*compiler-build-errors*/}
+
+If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with:
+- The error message
+- The code that caused the error
+- Your React and compiler versions
+
+### Runtime Issues {/*runtime-issues*/}
+
+For runtime behavior issues:
+
+### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/}
+
+Use `"use no memo"` to isolate whether an issue is compiler-related:
+
+```js
+function ProblematicComponent() {
+  "use no memo"; // Skip compilation for this component
+  // ... rest of component
+}
+```
+
+If the issue disappears, it's likely related to a Rules of React violation.
+
+You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed.
+
+### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/}
+
+1. Identify the root cause (often memoization-for-correctness)
+2. Test after each fix
+3. Remove `"use no memo"` once fixed
+4. Verify the component shows the ✨ badge in React DevTools
+
+## Reporting Compiler Bugs {/*reporting-compiler-bugs*/}
+
+If you believe you've found a compiler bug:
+
+1. **Verify it's not a Rules of React violation** - Check with ESLint
+2. **Create a minimal reproduction** - Isolate the issue in a small example
+3. **Test without the compiler** - Confirm the issue only occurs with compilation
+4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**:
+   - React and compiler versions
+   - Minimal reproduction code
+   - Expected vs actual behavior
+   - Any error messages
+
+## Next Steps {/*next-steps*/}
+
+- Review the [Rules of React](/reference/rules) to prevent issues
+- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md
new file mode 100644
index 000000000..56d932034
--- /dev/null
+++ b/src/content/learn/react-compiler/incremental-adoption.md
@@ -0,0 +1,225 @@
+---
+title: Incremental Adoption
+---
+
+<Intro>
+React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
+</Intro>
+
+<YouWillLearn>
+
+* Why incremental adoption is recommended
+* Using Babel overrides for directory-based adoption
+* Using the "use memo" directive for opt-in compilation
+* Using the "use no memo" directive to exclude components
+* Runtime feature flags with gating
+* Monitoring your adoption progress
+
+</YouWillLearn>
+
+## Why Incremental Adoption? {/*why-incremental-adoption*/}
+
+React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
+
+Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
+
+Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
+
+By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
+
+## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
+
+There are three main approaches to adopt React Compiler incrementally:
+
+1. **Babel overrides** - Apply the compiler to specific directories
+2. **Opt-in with "use memo"** - Only compile components that explicitly opt in
+3. **Runtime gating** - Control compilation with feature flags
+
+All approaches allow you to test the compiler on specific parts of your application before full rollout.
+
+## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
+
+Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
+
+### Basic Configuration {/*basic-configuration*/}
+
+Start by applying the compiler to a specific directory:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins that apply to all files
+  ],
+  overrides: [
+    {
+      test: './src/modern/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    }
+  ]
+};
+```
+
+### Expanding Coverage {/*expanding-coverage*/}
+
+As you gain confidence, add more directories:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    // Global plugins
+  ],
+  overrides: [
+    {
+      test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'],
+      plugins: [
+        'babel-plugin-react-compiler'
+      ]
+    },
+    {
+      test: './src/legacy/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        // Different plugins for legacy code
+      ]
+    }
+  ]
+};
+```
+
+### With Compiler Options {/*with-compiler-options*/}
+
+You can also configure compiler options per override:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [],
+  overrides: [
+    {
+      test: './src/experimental/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    },
+    {
+      test: './src/production/**/*.{js,jsx,ts,tsx}',
+      plugins: [
+        ['babel-plugin-react-compiler', {
+          // options ...
+        }]
+      ]
+    }
+  ]
+};
+```
+
+
+## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
+
+For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
+
+<Note>
+This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
+</Note>
+
+### Annotation Mode Configuration {/*annotation-mode-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation',
+    }],
+  ],
+};
+```
+
+### Using the Directive {/*using-the-directive*/}
+
+Add `"use memo"` at the beginning of functions you want to compile:
+
+```js
+function TodoList({ todos }) {
+  "use memo"; // Opt this component into compilation
+
+  const sortedTodos = todos.slice().sort();
+
+  return (
+    <ul>
+      {sortedTodos.map(todo => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </ul>
+  );
+}
+
+function useSortedData(data) {
+  "use memo"; // Opt this hook into compilation
+
+  return data.slice().sort();
+}
+```
+
+With `compilationMode: 'annotation'`, you must:
+- Add `"use memo"` to every component you want optimized
+- Add `"use memo"` to every custom hook
+- Remember to add it to new components
+
+This gives you precise control over which components are compiled while you evaluate the compiler's impact.
+
+## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
+
+The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
+
+### How Gating Works {/*how-gating-works*/}
+
+The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs.
+
+### Gating Configuration {/*gating-configuration*/}
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      gating: {
+        source: 'ReactCompilerFeatureFlags',
+        importSpecifierName: 'isCompilerEnabled',
+      },
+    }],
+  ],
+};
+```
+
+### Implementing the Feature Flag {/*implementing-the-feature-flag*/}
+
+Create a module that exports your gating function:
+
+```js
+// ReactCompilerFeatureFlags.js
+export function isCompilerEnabled() {
+  // Use your feature flag system
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+## Troubleshooting Adoption {/*troubleshooting-adoption*/}
+
+If you encounter issues during adoption:
+
+1. Use `"use no memo"` to temporarily exclude problematic components
+2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues
+3. Fix Rules of React violations identified by the ESLint plugin
+4. Consider using `compilationMode: 'annotation'` for more gradual adoption
+
+## Next Steps {/*next-steps*/}
+
+- Read the [configuration guide](/reference/react-compiler/configuration) for more options
+- Learn about [debugging techniques](/learn/react-compiler/debugging)
+- Check the [API reference](/reference/react-compiler/configuration) for all compiler options
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md
new file mode 100644
index 000000000..480187ed5
--- /dev/null
+++ b/src/content/learn/react-compiler/index.md
@@ -0,0 +1,33 @@
+---
+title: React Compiler
+---
+
+## Introduction {/*introduction*/}
+
+Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
+
+## Installation {/*installation*/}
+
+Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools.
+
+
+## Incremental Adoption {/*incremental-adoption*/}
+
+Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet.
+
+## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/}
+
+When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
+
+## Configuration and Reference {/*configuration-and-reference*/}
+
+For detailed configuration options and API reference:
+
+- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility
+- [Directives](/reference/react-compiler/directives) - Function-level compilation control
+- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
new file mode 100644
index 000000000..a40b1f5af
--- /dev/null
+++ b/src/content/learn/react-compiler/installation.md
@@ -0,0 +1,249 @@
+---
+title: Installation
+---
+
+<Intro>
+This guide will help you install and configure React Compiler in your React application.
+</Intro>
+
+<YouWillLearn>
+
+* How to install React Compiler
+* Basic configuration for different build tools
+* How to verify your setup is working
+
+</YouWillLearn>
+
+## Prerequisites {/*prerequisites*/}
+
+React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
+
+<Note>
+React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
+</Note>
+
+## Installation {/*installation*/}
+
+Install React Compiler as a `devDependency`:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Or with pnpm:
+
+<TerminalBlock>
+pnpm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+## Basic Setup {/*basic-setup*/}
+
+React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
+
+The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
+
+<Pitfall>
+React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
+</Pitfall>
+
+### Babel {/*babel*/}
+
+Create or update your `babel.config.js`:
+
+```js {3}
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler', // must run first!
+    // ... other plugins
+  ],
+  // ... other config
+};
+```
+
+### Vite {/*vite*/}
+
+If you use Vite, you can add the plugin to vite-plugin-react:
+
+```js {3,9}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+Alternatively, if you prefer a separate Babel plugin for Vite:
+
+<TerminalBlock>
+npm install -D vite-plugin-babel
+</TerminalBlock>
+
+```js {2,11}
+// vite.config.js
+import babel from 'vite-plugin-babel';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({
+      babelConfig: {
+        plugins: ['babel-plugin-react-compiler'],
+      },
+    }),
+  ],
+});
+```
+
+### Next.js {/*usage-with-nextjs*/}
+
+Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
+
+### React Router {/*usage-with-react-router*/}
+Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
+
+<TerminalBlock>
+{`npm install vite-plugin-babel`}
+</TerminalBlock>
+
+```js {3-4,16}
+// vite.config.js
+import { defineConfig } from "vite";
+import babel from "vite-plugin-babel";
+import { reactRouter } from "@react-router/dev/vite";
+
+const ReactCompilerConfig = { /* ... */ };
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    babel({
+      filter: /\.[jt]sx?$/,
+      babelConfig: {
+        presets: ["@babel/preset-typescript"], // if you use TypeScript
+        plugins: [
+          ["babel-plugin-react-compiler", ReactCompilerConfig],
+        ],
+      },
+    }),
+  ],
+});
+```
+
+### Webpack {/*usage-with-webpack*/}
+
+A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+
+### Expo {/*usage-with-expo*/}
+
+Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps.
+
+### Metro (React Native) {/*usage-with-react-native-metro*/}
+
+React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions.
+
+### Rspack {/*usage-with-rspack*/}
+
+Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps.
+
+### Rsbuild {/*usage-with-rsbuild*/}
+
+Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps.
+
+
+## ESLint Integration {/*eslint-integration*/}
+
+React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+
+Install the ESLint plugin:
+
+<TerminalBlock>
+npm install -D eslint-plugin-react-hooks@rc
+</TerminalBlock>
+
+If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed.
+
+The ESLint rule will:
+- Identify violations of the [Rules of React](/reference/rules)
+- Show which components can't be optimized
+- Provide helpful error messages for fixing issues
+
+## Verify Your Setup {/*verify-your-setup*/}
+
+After installation, verify that React Compiler is working correctly.
+
+### Check React DevTools {/*check-react-devtools*/}
+
+Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
+
+1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension
+2. Open your app in development mode
+3. Open React DevTools
+4. Look for the ✨ emoji next to component names
+
+If the compiler is working:
+- Components will show a "Memo ✨" badge in React DevTools
+- Expensive calculations will be automatically memoized
+- No manual `useMemo` is required
+
+### Check Build Output {/*check-build-output*/}
+
+You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
+
+```js
+import { c as _c } from "react/compiler-runtime";
+export default function MyApp() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div>Hello World</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Opting out specific components {/*opting-out-specific-components*/}
+
+If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
+
+```js
+function ProblematicComponent() {
+  "use no memo";
+  // Component code here
+}
+```
+
+This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
+
+For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
+
+## Next Steps {/*next-steps*/}
+
+Now that you have React Compiler installed, learn more about:
+
+- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
+- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
+- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
+- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
+- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
\ No newline at end of file
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
new file mode 100644
index 000000000..96fdf70db
--- /dev/null
+++ b/src/content/learn/react-compiler/introduction.md
@@ -0,0 +1,176 @@
+---
+title: Introduction
+---
+
+<Intro>
+React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+</Intro>
+
+<YouWillLearn>
+
+* What React Compiler does
+* Getting started with the compiler
+* Incremental adoption strategies
+* Debugging and troubleshooting when things go wrong
+* Using the compiler on your React library
+
+</YouWillLearn>
+
+<Note>
+React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag.
+</Note>
+
+## What does React Compiler do? {/*what-does-react-compiler-do*/}
+
+React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.
+
+### Before React Compiler {/*before-react-compiler*/}
+
+Without the compiler, you need to manually memoize components and values to optimize re-renders:
+
+```js
+import { useMemo, useCallback, memo } from 'react';
+
+const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
+  const processedData = useMemo(() => {
+    return expensiveProcessing(data);
+  }, [data]);
+
+  const handleClick = useCallback((item) => {
+    onClick(item.id);
+  }, [onClick]);
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+});
+```
+
+### After React Compiler {/*after-react-compiler*/}
+
+With React Compiler, you write the same code without manual memoization:
+
+```js
+function ExpensiveComponent({ data, onClick }) {
+  const processedData = expensiveProcessing(data);
+
+  const handleClick = (item) => {
+    onClick(item.id);
+  };
+
+  return (
+    <div>
+      {processedData.map(item => (
+        <Item key={item.id} onClick={() => handleClick(item)} />
+      ))}
+    </div>
+  );
+}
+```
+
+_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_
+
+React Compiler automatically applies the equivalent optimizations, ensuring your app only re-renders when necessary.
+
+<DeepDive>
+#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/}
+
+React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases:
+
+1. **Skipping cascading re-rendering of components**
+    * Re-rendering `<Parent />` causes many components in its component tree to re-render, even though only `<Parent />` has changed
+1. **Skipping expensive calculations from outside of React**
+    * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
+
+#### Optimizing Re-renders {/*optimizing-re-renders*/}
+
+React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes:
+
+```javascript
+function FriendList({ friends }) {
+  const onlineCount = useFriendOnlineCount();
+  if (friends.length === 0) {
+    return <NoFriends />;
+  }
+  return (
+    <div>
+      <span>{onlineCount} online</span>
+      {friends.map((friend) => (
+        <FriendListCard key={friend.id} friend={friend} />
+      ))}
+      <MessageButton />
+    </div>
+  );
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
+
+React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `<FriendListCard />` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `<MessageButton>` as the count changes.
+
+#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/}
+
+React Compiler can also automatically memoize expensive calculations used during rendering:
+
+```js
+// **Not** memoized by React Compiler, since this is not a component or hook
+function expensivelyProcessAReallyLargeArrayOfObjects() { /* ... */ }
+
+// Memoized by React Compiler since this is a component
+function TableContainer({ items }) {
+  // This function call would be memoized:
+  const data = expensivelyProcessAReallyLargeArrayOfObjects(items);
+  // ...
+}
+```
+[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA)
+
+However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because:
+
+- React Compiler only memoizes React components and hooks, not every function
+- React Compiler's memoization is not shared across multiple components or hooks
+
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+</DeepDive>
+
+## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work.
+
+### Is it safe to use? {/*is-it-safe-to-use*/}
+
+React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+
+## What build tools are supported? {/*what-build-tools-are-supported*/}
+
+React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild.
+
+React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future.
+
+Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up.
+
+## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+
+React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
+
+This is done out of caution as a common anti-pattern with manual memoization is using it for correctness.  This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
+
+## Try React Compiler {/*try-react-compiler*/}
+
+This section will help you get started with React Compiler and understand how to use it effectively in your projects.
+
+* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools
+* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19
+* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs
+* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases
+* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler
+* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code
+* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options
+
+## Additional resources {/*additional-resources*/}
+
+In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
+
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index b9f60723b..0b272e4fa 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -464,7 +464,11 @@ export default function Toggle() {
 
 #### Исправьте debouncing {/*fix-debouncing*/}
 
+<<<<<<< HEAD
 В данном примере все обработчики событий для кнопок являются ["debounced".](https://redd.one/blog/debounce-vs-throttle) Чтобы понять, как это работает, кликните на одну из кнопок. Обратите внимание, что сообщение появляется через секунду. Если нажать на кнопку во время ожидания сообщения, таймер сбросится. Таким образом, если вы продолжите кликать одну и ту же кнопку много раз, сообщение не появится до тех пор, пока не пройдёт секунда _после_ последнего клика. Debouncing позволяет вам установить задержку до тех пор, пока пользователь «не прекратит делать что-то», прежде чем произойдёт какое-то действие.
+=======
+In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Этот пример работает, но не совсем как было задумано. Кнопки не являются независимыми. Чтобы увидеть проблему, кликните на одну из кнопок и затем кликните на другую кнопку. Мы ожидаем увидеть два сообщения, которые привязаны к каждой кнопке. Но мы увидим только сообщение последней. Сообщение первой кнопки потерялось.
 
diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md
index c3da0c637..fe1762d8e 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -461,11 +461,11 @@ export default function TaskApp() {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
   // ...
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         ...
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 ```
@@ -509,8 +509,8 @@ export default function TaskApp() {
   }
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         <h1>Day off in Kyoto</h1>
         <AddTask
           onAddTask={handleAddTask}
@@ -520,8 +520,8 @@ export default function TaskApp() {
           onChangeTask={handleChangeTask}
           onDeleteTask={handleDeleteTask}
         />
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
@@ -676,16 +676,16 @@ In the next step, you will remove prop passing.
 Now you don't need to pass the list of tasks or the event handlers down the tree:
 
 ```js {4-5}
-<TasksContext.Provider value={tasks}>
-  <TasksDispatchContext.Provider value={dispatch}>
+<TasksContext value={tasks}>
+  <TasksDispatchContext value={dispatch}>
     <h1>Day off in Kyoto</h1>
     <AddTask />
     <TaskList />
-  </TasksDispatchContext.Provider>
-</TasksContext.Provider>
+  </TasksDispatchContext>
+</TasksContext>
 ```
 
-Instead, any component that needs the task list can read it from the `TaskContext`:
+Instead, any component that needs the task list can read it from the `TasksContext`:
 
 ```js {2}
 export default function TaskList() {
@@ -730,13 +730,13 @@ export default function TaskApp() {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         <h1>Day off in Kyoto</h1>
         <AddTask />
         <TaskList />
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
@@ -921,11 +921,11 @@ export function TasksProvider({ children }) {
   const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 ```
@@ -963,11 +963,11 @@ export function TasksProvider({ children }) {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
@@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
@@ -1363,4 +1363,3 @@ As your app grows, you may have many context-reducer pairs like this. This is a
 - You can have many context-reducer pairs like this in your app.
 
 </Recap>
-
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 1768b2576..9f4097613 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -732,8 +732,13 @@ function TodoList() {
 
 Этот список недостатков не специфичен для React. Он применим к получению данных при монтировании с любой библиотекой. Как и с маршрутизацией, получение данных не является тривиальной задачей, поэтому мы рекомендуем следующие подходы:
 
+<<<<<<< HEAD
 - **Если вы используете [фреймворк](/learn/start-a-new-react-project#production-grade-react-frameworks), используйте его встроенный механизм получения данных.** Современные React-фреймворки имеют интегрированные механизмы получения данных, которые эффективны и не страдают от вышеупомянутых недостатков.
 - **В противном случае рассмотрите возможность использования или создания кэша на стороне клиента.** Популярные решения с открытым исходным кодом включают [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/) и [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) Вы также можете создать собственное решение, в этом случае вы будете использовать Эффекты под капотом, но добавите логику, чтобы устранить дублирование запросов, кэширования ответов и избежать сетевые водопады (предзагружая данные или поднимая требования к данным к маршрутам).
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Вы можете продолжать получать данные напрямую в Эффектах, если ни один из этих подходов вам не подходит.
 
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 7edf8eb6e..c348e6496 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -13,14 +13,14 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 
 * [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
 * [Examples of typing with Hooks](/learn/typescript#example-hooks)
-* [Common types from `@types/react`](/learn/typescript/#useful-types)
-* [Further learning locations](/learn/typescript/#further-learning)
+* [Common types from `@types/react`](/learn/typescript#useful-types)
+* [Further learning locations](/learn/typescript#further-learning)
 
 </YouWillLearn>
 
 ## Installation {/*installation*/}
 
-All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
+All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
 
 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
@@ -124,7 +124,7 @@ The type describing your component's props can be as simple or as complex as you
 
 ## Example Hooks {/*example-hooks*/}
 
-The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. 
+The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
 
 However, we can look at a few examples of how to provide types for Hooks.
 
@@ -139,7 +139,7 @@ const [enabled, setEnabled] = useState(false);
 
 This will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call:
 
-```ts 
+```ts
 // Explicitly set the type to "boolean"
 const [enabled, setEnabled] = useState<boolean>(false);
 ```
@@ -174,7 +174,7 @@ The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that
 import {useReducer} from 'react';
 
 interface State {
-   count: number 
+   count: number
 };
 
 type CounterAction =
@@ -260,9 +260,9 @@ export default function MyApp() {
   const [theme, setTheme] = useState<Theme>('light');
 
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext value={theme}>
       <MyComponent />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 
@@ -284,7 +284,7 @@ export default App = AppTSX;
 
 </Sandpack>
 
-This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
+This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`.
 
 This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the Hook do a runtime check for it's existence and throw an error when not present:
 
@@ -310,9 +310,9 @@ export default function MyApp() {
   const object = useMemo(() => ({ kind: "complex" }), []);
 
   return (
-    <Context.Provider value={object}>
+    <Context value={object}>
       <MyComponent />
-    </Context.Provider>
+    </Context>
   )
 }
 
@@ -329,6 +329,12 @@ function MyComponent() {
 
 ### `useMemo` {/*typing-usememo*/}
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
 
 ```ts
@@ -339,6 +345,12 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
 
 ### `useCallback` {/*typing-usecallback*/}
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
 
 
@@ -350,7 +362,7 @@ const handleClick = useCallback(() => {
 
 When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood.
 
-Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: 
+Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
 
 ```ts
 import { useState, useCallback } from 'react';
@@ -361,7 +373,7 @@ export default function Form() {
   const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
     setValue(event.currentTarget.value);
   }, [setValue])
-  
+
   return (
     <>
       <input value={value} onChange={handleChange} />
@@ -433,7 +445,7 @@ interface ModalRendererProps {
 }
 ```
 
-Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children. 
+Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.
 
 You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
 
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 a009793ab..88e490e1a 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -26,7 +26,7 @@ There are two common cases in which you don't need Effects:
 * **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
 * **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers.
 
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
+You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
 
 To help you gain the right intuition, let's look at some common concrete examples!
 
@@ -95,6 +95,12 @@ Usually, this code is fine! But maybe `getFilteredTodos()` is slow or you have a
 
 You can cache (or ["memoize"](https://en.wikipedia.org/wiki/Memoization)) an expensive calculation by wrapping it in a [`useMemo`](/reference/react/useMemo) Hook:
 
+<Note>
+
+[React Compiler](/learn/react-compiler) can automatically memoize expensive calculations for you, eliminating the need for manual `useMemo` in many cases.
+
+</Note>
+
 ```js {5-8}
 import { useMemo, useState } from 'react';
 
@@ -751,7 +757,7 @@ This ensures that when your Effect fetches data, all responses except the last r
 
 Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about caching responses (so that the user can click Back and see the previous screen instantly), how to fetch data on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child can fetch data without waiting for every parent).
 
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
+**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
 
 If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example:
 
diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md
new file mode 100644
index 000000000..5513d1c6a
--- /dev/null
+++ b/src/content/reference/react-compiler/compilationMode.md
@@ -0,0 +1,201 @@
+---
+title: compilationMode
+---
+
+<Intro>
+
+The `compilationMode` option controls how the React Compiler selects which functions to compile.
+
+</Intro>
+
+```js
+{
+  compilationMode: 'infer' // or 'annotation', 'syntax', 'all'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `compilationMode` {/*compilationmode*/}
+
+Controls the strategy for determining which functions the React Compiler will optimize.
+
+#### Type {/*type*/}
+
+```
+'infer' | 'syntax' | 'annotation' | 'all'
+```
+
+#### Default value {/*default-value*/}
+
+`'infer'`
+
+#### Options {/*options*/}
+
+- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
+  - Functions explicitly annotated with `"use memo"` directive
+  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+
+- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+
+- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+
+- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+
+#### Caveats {/*caveats*/}
+
+- The `'infer'` mode requires functions to follow React naming conventions to be detected
+- Using `'all'` mode may negatively impact performance by compiling utility functions
+- The `'syntax'` mode requires Flow and won't work with TypeScript
+- Regardless of mode, functions with `"use no memo"` directive are always skipped
+
+---
+
+## Usage {/*usage*/}
+
+### Default inference mode {/*default-inference-mode*/}
+
+The default `'infer'` mode works well for most codebases that follow React conventions:
+
+```js
+{
+  compilationMode: 'infer'
+}
+```
+
+With this mode, these functions will be compiled:
+
+```js
+// ✅ Compiled: Named like a component + returns JSX
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Compiled: Named like a hook + calls hooks
+function useCounter() {
+  const [count, setCount] = useState(0);
+  return [count, setCount];
+}
+
+// ✅ Compiled: Explicit directive
+function expensiveCalculation(data) {
+  "use memo";
+  return data.reduce(/* ... */);
+}
+
+// ❌ Not compiled: Not a component/hook pattern
+function calculateTotal(items) {
+  return items.reduce((a, b) => a + b, 0);
+}
+```
+
+### Incremental adoption with annotation mode {/*incremental-adoption*/}
+
+For gradual migration, use `'annotation'` mode to only compile marked functions:
+
+```js
+{
+  compilationMode: 'annotation'
+}
+```
+
+Then explicitly mark functions to compile:
+
+```js
+// Only this function will be compiled
+function ExpensiveList(props) {
+  "use memo";
+  return (
+    <ul>
+      {props.items.map(item => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+// This won't be compiled without the directive
+function NormalComponent(props) {
+  return <div>{props.content}</div>;
+}
+```
+
+### Using Flow syntax mode {/*flow-syntax-mode*/}
+
+If your codebase uses Flow instead of TypeScript:
+
+```js
+{
+  compilationMode: 'syntax'
+}
+```
+
+Then use Flow's component syntax:
+
+```js
+// Compiled: Flow component syntax
+component Button(label: string) {
+  return <button>{label}</button>;
+}
+
+// Compiled: Flow hook syntax
+hook useCounter(initial: number) {
+  const [count, setCount] = useState(initial);
+  return [count, setCount];
+}
+
+// Not compiled: Regular function syntax
+function helper(data) {
+  return process(data);
+}
+```
+
+### Opting out specific functions {/*opting-out*/}
+
+Regardless of compilation mode, use `"use no memo"` to skip compilation:
+
+```js
+function ComponentWithSideEffects() {
+  "use no memo"; // Prevent compilation
+
+  // This component has side effects that shouldn't be memoized
+  logToAnalytics('component_rendered');
+
+  return <div>Content</div>;
+}
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+
+In `'infer'` mode, ensure your component follows React conventions:
+
+```js
+// ❌ Won't be compiled: lowercase name
+function button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ✅ Will be compiled: PascalCase name
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// ❌ Won't be compiled: doesn't create JSX or call hooks
+function useData() {
+  return window.localStorage.getItem('data');
+}
+
+// ✅ Will be compiled: calls a hook
+function useData() {
+  const [data] = useState(() => window.localStorage.getItem('data'));
+  return data;
+}
+```
diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md
new file mode 100644
index 000000000..f09ffcb72
--- /dev/null
+++ b/src/content/reference/react-compiler/compiling-libraries.md
@@ -0,0 +1,106 @@
+---
+title: Compiling Libraries
+---
+
+<Intro>
+This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+</Intro>
+
+<InlineToc />
+
+## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+
+As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+
+- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
+- **No configuration required by users** - The optimizations work out of the box
+- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+
+## Setting Up Compilation {/*setting-up-compilation*/}
+
+Add React Compiler to your library's build process:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@rc
+</TerminalBlock>
+
+Configure your build tool to compile your library. For example, with Babel:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler',
+  ],
+  // ... other config
+};
+```
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+
+If your library supports React versions below 19, you'll need additional configuration:
+
+### 1. Install the runtime package {/*install-runtime-package*/}
+
+We recommend installing react-compiler-runtime as a direct dependency:
+
+<TerminalBlock>
+npm install react-compiler-runtime@rc
+</TerminalBlock>
+
+```json
+{
+  "dependencies": {
+    "react-compiler-runtime": "^19.1.0-rc.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}
+```
+
+### 2. Configure the target version {/*configure-target-version*/}
+
+Set the minimum React version your library supports:
+
+```js
+{
+  target: '17', // Minimum supported React version
+}
+```
+
+## Testing Strategy {/*testing-strategy*/}
+
+Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+
+If your compiled library throws errors in React 17 or 18:
+
+1. Verify you've installed `react-compiler-runtime` as a dependency
+2. Check that your `target` configuration matches your minimum supported React version
+3. Ensure the runtime package is included in your published bundle
+
+### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+
+Some Babel plugins may conflict with React Compiler:
+
+1. Place `babel-plugin-react-compiler` early in your plugin list
+2. Disable conflicting optimizations in other plugins
+3. Test your build output thoroughly
+
+### Runtime module not found {/*runtime-module-not-found*/}
+
+If users see "Cannot find module 'react-compiler-runtime'":
+
+1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
+2. Check that your bundler includes the runtime in the output
+3. Verify the package is published to npm with your library
+
+## Next Steps {/*next-steps*/}
+
+- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
+- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
+- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md
new file mode 100644
index 000000000..f38f1afc0
--- /dev/null
+++ b/src/content/reference/react-compiler/configuration.md
@@ -0,0 +1,151 @@
+---
+title: Configuration
+---
+
+<Intro>
+
+This page lists all configuration options available in React Compiler.
+
+</Intro>
+
+<Note>
+
+For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
+
+</Note>
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-react-compiler', {
+        // compiler options
+      }
+    ]
+  ]
+};
+```
+
+---
+
+## Compilation Control {/*compilation-control*/}
+
+These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
+---
+
+## Version Compatibility {/*version-compatibility*/}
+
+React version configuration ensures the compiler generates code compatible with your React version.
+
+[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
+
+```js
+// For React 18 projects
+{
+  target: '18' // Also requires react-compiler-runtime package
+}
+```
+
+---
+
+## Error Handling {/*error-handling*/}
+
+These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
+
+[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
+
+```js
+// Recommended for production
+{
+  panicThreshold: 'none' // Skip components with errors instead of failing the build
+}
+```
+
+---
+
+## Debugging {/*debugging*/}
+
+Logging and analysis options help you understand what the compiler is doing.
+
+[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileSuccess') {
+        console.log('Compiled:', filename);
+      }
+    }
+  }
+}
+```
+
+---
+
+## Feature Flags {/*feature-flags*/}
+
+Conditional compilation lets you control when optimized code is used.
+
+[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'isCompilerEnabled'
+  }
+}
+```
+
+---
+
+## Common Configuration Patterns {/*common-patterns*/}
+
+### Default configuration {/*default-configuration*/}
+
+For most React 19 applications, the compiler works without configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    'babel-plugin-react-compiler'
+  ]
+};
+```
+
+### React 17/18 projects {/*react-17-18*/}
+
+Older React versions need the runtime package and target configuration:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+```js
+{
+  target: '18' // or '17'
+}
+```
+
+### Incremental adoption {/*incremental-adoption*/}
+
+Start with specific directories and expand gradually:
+
+```js
+{
+  compilationMode: 'annotation' // Only compile "use memo" functions
+}
+```
+
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
new file mode 100644
index 000000000..705d0f620
--- /dev/null
+++ b/src/content/reference/react-compiler/directives.md
@@ -0,0 +1,198 @@
+---
+title: Directives
+---
+
+<Intro>
+React Compiler directives are special string literals that control whether specific functions are compiled.
+</Intro>
+
+```js
+function MyComponent() {
+  "use memo"; // Opt this component into compilation
+  return <div>{/* ... */}</div>;
+}
+```
+
+<InlineToc />
+
+---
+
+## Overview {/*overview*/}
+
+React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module.
+
+### Available directives {/*available-directives*/}
+
+* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation
+* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation
+
+### Quick comparison {/*quick-comparison*/}
+
+| Directive | Purpose | When to use |
+|-----------|---------|-------------|
+| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics |
+| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code |
+
+---
+
+## Usage {/*usage*/}
+
+### Function-level directives {/*function-level*/}
+
+Place directives at the beginning of a function to control its compilation:
+
+```js
+// Opt into compilation
+function OptimizedComponent() {
+  "use memo";
+  return <div>This will be optimized</div>;
+}
+
+// Opt out of compilation
+function UnoptimizedComponent() {
+  "use no memo";
+  return <div>This won't be optimized</div>;
+}
+```
+
+### Module-level directives {/*module-level*/}
+
+Place directives at the top of a file to affect all functions in that module:
+
+```js
+// At the very top of the file
+"use memo";
+
+// All functions in this file will be compiled
+function Component1() {
+  return <div>Compiled</div>;
+}
+
+function Component2() {
+  return <div>Also compiled</div>;
+}
+
+// Can be overridden at function level
+function Component3() {
+  "use no memo"; // This overrides the module directive
+  return <div>Not compiled</div>;
+}
+```
+
+### Compilation modes interaction {/*compilation-modes*/}
+
+Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode):
+
+* **`annotation` mode**: Only functions with `"use memo"` are compiled
+* **`infer` mode**: Compiler decides what to compile, directives override decisions
+* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions
+
+---
+
+## Best practices {/*best-practices*/}
+
+### Use directives sparingly {/*use-sparingly*/}
+
+Directives are escape hatches. Prefer configuring the compiler at the project level:
+
+```js
+// ✅ Good - project-wide configuration
+{
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'infer'
+    }]
+  ]
+}
+
+// ⚠️ Use directives only when needed
+function SpecialCase() {
+  "use no memo"; // Document why this is needed
+  // ...
+}
+```
+
+### Document directive usage {/*document-usage*/}
+
+Always explain why a directive is used:
+
+```js
+// ✅ Good - clear explanation
+function DataGrid() {
+  "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123)
+  // Complex grid implementation
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### Plan for removal {/*plan-removal*/}
+
+Opt-out directives should be temporary:
+
+1. Add the directive with a TODO comment
+2. Create a tracking issue
+3. Fix the underlying problem
+4. Remove the directive
+
+```js
+function TemporaryWorkaround() {
+  "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0
+  return <ThirdPartyComponent />;
+}
+```
+
+---
+
+## Common patterns {/*common-patterns*/}
+
+### Gradual adoption {/*gradual-adoption*/}
+
+When adopting the React Compiler in a large codebase:
+
+```js
+// Start with annotation mode
+{
+  compilationMode: 'annotation'
+}
+
+// Opt in stable components
+function StableComponent() {
+  "use memo";
+  // Well-tested component
+}
+
+// Later, switch to infer mode and opt out problematic ones
+function ProblematicComponent() {
+  "use no memo"; // Fix issues before removing
+  // ...
+}
+```
+
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+For specific issues with directives, see the troubleshooting sections in:
+
+* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting)
+* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting)
+
+### Common issues {/*common-issues*/}
+
+1. **Directive ignored**: Check placement (must be first) and spelling
+2. **Compilation still happens**: Check `ignoreUseNoForget` setting
+3. **Module directive not working**: Ensure it's before all imports
+
+---
+
+## See also {/*see-also*/}
+
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
+* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
+* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md
new file mode 100644
index 000000000..431862682
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-memo.md
@@ -0,0 +1,157 @@
+---
+title: "use memo"
+titleForTitleTag: "'use memo' directive"
+---
+
+<Intro>
+
+`"use memo"` marks a function for React Compiler optimization.
+
+</Intro>
+
+<Note>
+
+In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+</Note>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use memo"` {/*use-memo*/}
+
+Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use memo";
+  // ...
+}
+```
+
+When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders.
+
+#### Caveats {/*caveats*/}
+
+* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use memo"`.
+* Only the first directive in a function is processed; additional directives are ignored.
+* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting.
+
+### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/}
+
+In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it.
+
+`"use memo"` explicitly marks a function for optimization, overriding the default behavior:
+
+* In `annotation` mode: Only functions with `"use memo"` are optimized
+* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization
+* In `all` mode: Everything is optimized by default, making `"use memo"` redundant
+
+The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process.
+
+### When to use `"use memo"` {/*when-to-use*/}
+
+You should consider using `"use memo"` when:
+
+#### You're using annotation mode {/*annotation-mode-use*/}
+In `compilationMode: 'annotation'`, the directive is required for any function you want optimized:
+
+```js
+// ✅ This component will be optimized
+function OptimizedList() {
+  "use memo";
+  // ...
+}
+
+// ❌ This component won't be optimized
+function SimpleWrapper() {
+  // ...
+}
+```
+
+#### You're gradually adopting React Compiler {/*gradual-adoption*/}
+Start with `annotation` mode and selectively optimize stable components:
+
+```js
+// Start by optimizing leaf components
+function Button({ onClick, children }) {
+  "use memo";
+  // ...
+}
+
+// Gradually move up the tree as you verify behavior
+function ButtonGroup({ buttons }) {
+  "use memo";
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+### Working with different compilation modes {/*compilation-modes*/}
+
+The behavior of `"use memo"` changes based on your compiler configuration:
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler', {
+      compilationMode: 'annotation' // or 'infer' or 'all'
+    }]
+  ]
+};
+```
+
+#### Annotation mode {/*annotation-mode-example*/}
+```js
+// ✅ Optimized with "use memo"
+function ProductCard({ product }) {
+  "use memo";
+  // ...
+}
+
+// ❌ Not optimized (no directive)
+function ProductList({ products }) {
+  // ...
+}
+```
+
+#### Infer mode (default) {/*infer-mode-example*/}
+```js
+// Automatically memoized because this is named like a Component
+function ComplexDashboard({ data }) {
+  // ...
+}
+
+// Skipped: Is not named like a Component
+function simpleDisplay({ text }) {
+  // ...
+}
+```
+
+In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Verifying optimization {/*verifying-optimization*/}
+
+To confirm your component is being optimized:
+
+1. Check the compiled output in your build
+2. Use React DevTools to check for Memo ✨ badge
+
+### See also {/*see-also*/}
+
+* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md
new file mode 100644
index 000000000..e6c419bc6
--- /dev/null
+++ b/src/content/reference/react-compiler/directives/use-no-memo.md
@@ -0,0 +1,147 @@
+---
+title: "use no memo"
+titleForTitleTag: "'use no memo' directive"
+---
+
+<Intro>
+
+`"use no memo"` prevents a function from being optimized by React Compiler.
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `"use no memo"` {/*use-no-memo*/}
+
+Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization.
+
+```js {1}
+function MyComponent() {
+  "use no memo";
+  // ...
+}
+```
+
+When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler.
+
+#### Caveats {/*caveats*/}
+
+* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
+* The directive must be written with double or single quotes, not backticks.
+* The directive must exactly match `"use no memo"` or its alias `"use no forget"`.
+* This directive takes precedence over all compilation modes and other directives.
+* It's intended as a temporary debugging tool, not a permanent solution.
+
+### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/}
+
+React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely.
+
+This directive takes precedence over all other settings:
+* In `all` mode: The function is skipped despite the global setting
+* In `infer` mode: The function is skipped even if heuristics would optimize it
+
+The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written.
+
+### When to use `"use no memo"` {/*when-to-use*/}
+
+`"use no memo"` should be used sparingly and temporarily. Common scenarios include:
+
+#### Debugging compiler issues {/*debugging-compiler*/}
+When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:
+
+```js
+function ProblematicComponent({ data }) {
+  "use no memo"; // TODO: Remove after fixing issue #123
+
+  // Rules of React violations that weren't statically detected
+  // ...
+}
+```
+
+#### Third-party library integration {/*third-party*/}
+When integrating with libraries that might not be compatible with the compiler:
+
+```js
+function ThirdPartyWrapper() {
+  "use no memo";
+
+  useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
+  // ...
+}
+```
+
+---
+
+## Usage {/*usage*/}
+
+The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:
+
+```js
+function MyComponent() {
+  "use no memo";
+  // Function body
+}
+```
+
+The directive can also be placed at the top of a file to affect all functions in that module:
+
+```js
+"use no memo";
+
+// All functions in this file will be skipped by the compiler
+```
+
+`"use no memo"` at the function level overrides the module level directive.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Directive not preventing compilation {/*not-preventing*/}
+
+If `"use no memo"` isn't working:
+
+```js
+// ❌ Wrong - directive after code
+function Component() {
+  const data = getData();
+  "use no memo"; // Too late!
+}
+
+// ✅ Correct - directive first
+function Component() {
+  "use no memo";
+  const data = getData();
+}
+```
+
+Also check:
+* Spelling - must be exactly `"use no memo"`
+* Quotes - must use single or double quotes, not backticks
+
+### Best practices {/*best-practices*/}
+
+**Always document why** you're disabling optimization:
+
+```js
+// ✅ Good - clear explanation and tracking
+function DataProcessor() {
+  "use no memo"; // TODO: Remove after fixing rule of react violation
+  // ...
+}
+
+// ❌ Bad - no explanation
+function Mystery() {
+  "use no memo";
+  // ...
+}
+```
+
+### See also {/*see-also*/}
+
+* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation
+* [React Compiler](/learn/react-compiler) - Getting started guide
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md
new file mode 100644
index 000000000..479506af3
--- /dev/null
+++ b/src/content/reference/react-compiler/gating.md
@@ -0,0 +1,141 @@
+---
+title: gating
+---
+
+<Intro>
+
+The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime.
+
+</Intro>
+
+```js
+{
+  gating: {
+    source: 'my-feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `gating` {/*gating*/}
+
+Configures runtime feature flag gating for compiled functions.
+
+#### Type {/*type*/}
+
+```
+{
+  source: string;
+  importSpecifierName: string;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Properties {/*properties*/}
+
+- **`source`**: Module path to import the feature flag from
+- **`importSpecifierName`**: Name of the exported function to import
+
+#### Caveats {/*caveats*/}
+
+- The gating function must return a boolean
+- Both compiled and original versions increase bundle size
+- The import is added to every file with compiled functions
+
+---
+
+## Usage {/*usage*/}
+
+### Basic feature flag setup {/*basic-setup*/}
+
+1. Create a feature flag module:
+
+```js
+// src/utils/feature-flags.js
+export function shouldUseCompiler() {
+  // your logic here
+  return getFeatureFlag('react-compiler-enabled');
+}
+```
+
+2. Configure the compiler:
+
+```js
+{
+  gating: {
+    source: './src/utils/feature-flags',
+    importSpecifierName: 'shouldUseCompiler'
+  }
+}
+```
+
+3. The compiler generates gated code:
+
+```js
+// Input
+function Button(props) {
+  return <button>{props.label}</button>;
+}
+
+// Output (simplified)
+import { shouldUseCompiler } from './src/utils/feature-flags';
+
+const Button = shouldUseCompiler()
+  ? function Button_optimized(props) { /* compiled version */ }
+  : function Button_original(props) { /* original version */ };
+```
+
+Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Feature flag not working {/*flag-not-working*/}
+
+Verify your flag module exports the correct function:
+
+```js
+// ❌ Wrong: Default export
+export default function shouldUseCompiler() {
+  return true;
+}
+
+// ✅ Correct: Named export matching importSpecifierName
+export function shouldUseCompiler() {
+  return true;
+}
+```
+
+### Import errors {/*import-errors*/}
+
+Ensure the source path is correct:
+
+```js
+// ❌ Wrong: Relative to babel.config.js
+{
+  source: './src/flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Correct: Module resolution path
+{
+  source: '@myapp/feature-flags',
+  importSpecifierName: 'flag'
+}
+
+// ✅ Also correct: Absolute path from project root
+{
+  source: './src/utils/flags',
+  importSpecifierName: 'flag'
+}
+```
diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md
new file mode 100644
index 000000000..41e2a1da0
--- /dev/null
+++ b/src/content/reference/react-compiler/logger.md
@@ -0,0 +1,118 @@
+---
+title: logger
+---
+
+<Intro>
+
+The `logger` option provides custom logging for React Compiler events during compilation.
+
+</Intro>
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      console.log(`[Compiler] ${event.kind}: ${filename}`);
+    }
+  }
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `logger` {/*logger*/}
+
+Configures custom logging to track compiler behavior and debug issues.
+
+#### Type {/*type*/}
+
+```
+{
+  logEvent: (filename: string | null, event: LoggerEvent) => void;
+} | null
+```
+
+#### Default value {/*default-value*/}
+
+`null`
+
+#### Methods {/*methods*/}
+
+- **`logEvent`**: Called for each compiler event with the filename and event details
+
+#### Event types {/*event-types*/}
+
+- **`CompileSuccess`**: Function successfully compiled
+- **`CompileError`**: Function skipped due to errors
+- **`CompileDiagnostic`**: Non-fatal diagnostic information
+- **`CompileSkip`**: Function skipped for other reasons
+- **`PipelineError`**: Unexpected compilation error
+- **`Timing`**: Performance timing information
+
+#### Caveats {/*caveats*/}
+
+- Event structure may change between versions
+- Large codebases generate many log entries
+
+---
+
+## Usage {/*usage*/}
+
+### Basic logging {/*basic-logging*/}
+
+Track compilation success and failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      switch (event.kind) {
+        case 'CompileSuccess': {
+          console.log(`✅ Compiled: ${filename}`);
+          break;
+        }
+        case 'CompileError': {
+          console.log(`❌ Skipped: ${filename}`);
+          break;
+        }
+        default: {}
+      }
+    }
+  }
+}
+```
+
+### Detailed error logging {/*detailed-error-logging*/}
+
+Get specific information about compilation failures:
+
+```js
+{
+  logger: {
+    logEvent(filename, event) {
+      if (event.kind === 'CompileError') {
+        console.error(`\nCompilation failed: ${filename}`);
+        console.error(`Reason: ${event.detail.reason}`);
+
+        if (event.detail.description) {
+          console.error(`Details: ${event.detail.description}`);
+        }
+
+        if (event.detail.loc) {
+          const { line, column } = event.detail.loc.start;
+          console.error(`Location: Line ${line}, Column ${column}`);
+        }
+
+        if (event.detail.suggestions) {
+          console.error('Suggestions:', event.detail.suggestions);
+        }
+      }
+    }
+  }
+}
+```
+
diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md
new file mode 100644
index 000000000..e20f5c0c5
--- /dev/null
+++ b/src/content/reference/react-compiler/panicThreshold.md
@@ -0,0 +1,87 @@
+---
+title: panicThreshold
+---
+
+<Intro>
+
+The `panicThreshold` option controls how the React Compiler handles errors during compilation.
+
+</Intro>
+
+```js
+{
+  panicThreshold: 'none' // Recommended
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `panicThreshold` {/*panicthreshold*/}
+
+Determines whether compilation errors should fail the build or skip optimization.
+
+#### Type {/*type*/}
+
+```
+'none' | 'critical_errors' | 'all_errors'
+```
+
+#### Default value {/*default-value*/}
+
+`'none'`
+
+#### Options {/*options*/}
+
+- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building
+- **`'critical_errors'`**: Fail the build only on critical compiler errors
+- **`'all_errors'`**: Fail the build on any compiler diagnostic
+
+#### Caveats {/*caveats*/}
+
+- Production builds should always use `'none'`
+- Build failures prevent your application from building
+- The compiler automatically detects and skips problematic code with `'none'`
+- Higher thresholds are only useful during development for debugging
+
+---
+
+## Usage {/*usage*/}
+
+### Production configuration (recommended) {/*production-configuration*/}
+
+For production builds, always use `'none'`. This is the default value:
+
+```js
+{
+  panicThreshold: 'none'
+}
+```
+
+This ensures:
+- Your build never fails due to compiler issues
+- Components that can't be optimized run normally
+- Maximum components get optimized
+- Stable production deployments
+
+### Development debugging {/*development-debugging*/}
+
+Temporarily use stricter thresholds to find issues:
+
+```js
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+{
+  panicThreshold: isDevelopment ? 'critical_errors' : 'none',
+  logger: {
+    logEvent(filename, event) {
+      if (isDevelopment && event.kind === 'CompileError') {
+        // ...
+      }
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md
new file mode 100644
index 000000000..381748513
--- /dev/null
+++ b/src/content/reference/react-compiler/target.md
@@ -0,0 +1,148 @@
+---
+title: target
+---
+
+<Intro>
+
+The `target` option specifies which React version the compiler should generate code for.
+
+</Intro>
+
+```js
+{
+  target: '19' // or '18', '17'
+}
+```
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `target` {/*target*/}
+
+Configures the React version compatibility for the compiled output.
+
+#### Type {/*type*/}
+
+```
+'17' | '18' | '19'
+```
+
+#### Default value {/*default-value*/}
+
+`'19'`
+
+#### Valid values {/*valid-values*/}
+
+- **`'19'`**: Target React 19 (default). No additional runtime required.
+- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package.
+- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package.
+
+#### Caveats {/*caveats*/}
+
+- Always use string values, not numbers (e.g., `'17'` not `17`)
+- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`)
+- React 19 includes built-in compiler runtime APIs
+- React 17 and 18 require installing `react-compiler-runtime@rc`
+
+---
+
+## Usage {/*usage*/}
+
+### Targeting React 19 (default) {/*targeting-react-19*/}
+
+For React 19, no special configuration is needed:
+
+```js
+{
+  // defaults to target: '19'
+}
+```
+
+The compiler will use React 19's built-in runtime APIs:
+
+```js
+// Compiled output uses React 19's native APIs
+import { c as _c } from 'react/compiler-runtime';
+```
+
+### Targeting React 17 or 18 {/*targeting-react-17-or-18*/}
+
+For React 17 and React 18 projects, you need two steps:
+
+1. Install the runtime package:
+
+```bash
+npm install react-compiler-runtime@rc
+```
+
+2. Configure the target:
+
+```js
+// For React 18
+{
+  target: '18'
+}
+
+// For React 17
+{
+  target: '17'
+}
+```
+
+The compiler will use the polyfill runtime for both versions:
+
+```js
+// Compiled output uses the polyfill
+import { c as _c } from 'react-compiler-runtime';
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### Runtime errors about missing compiler runtime {/*missing-runtime*/}
+
+If you see errors like "Cannot find module 'react/compiler-runtime'":
+
+1. Check your React version:
+   ```bash
+   npm why react
+   ```
+
+2. If using React 17 or 18, install the runtime:
+   ```bash
+   npm install react-compiler-runtime@rc
+   ```
+
+3. Ensure your target matches your React version:
+   ```js
+   {
+     target: '18' // Must match your React major version
+   }
+   ```
+
+### Runtime package not working {/*runtime-not-working*/}
+
+Ensure the runtime package is:
+
+1. Installed in your project (not globally)
+2. Listed in your `package.json` dependencies
+3. The correct version (`@rc` tag)
+4. Not in `devDependencies` (it's needed at runtime)
+
+### Checking compiled output {/*checking-output*/}
+
+To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18):
+
+```js
+// For React 19 (built-in runtime)
+import { c } from 'react/compiler-runtime'
+//                      ^
+
+// For React 17/18 (polyfill runtime)
+import { c } from 'react-compiler-runtime'
+//                      ^
+```
\ No newline at end of file
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index adc6a8d37..da12ee27c 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -90,7 +90,7 @@ React will display `<App />` in the `root`, and take over managing the DOM insid
 
 * If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
 
-* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/client/flushSync) to ensure the initial render runs fully synchronously.
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
   
   ```js
   const root = createRoot(document.getElementById('root'));
@@ -209,7 +209,7 @@ When your HTML is empty, the user sees a blank page until the app's JavaScript c
 <div id="root"></div>
 ```
 
-This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
+This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
 
 </Note>
 
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index 89f48212f..a00422023 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,7 +4,7 @@ title: Client React DOM APIs
 
 <Intro>
 
-The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
 
 </Intro>
 
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 9d1533213..f6e73b7c8 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -916,7 +916,7 @@ export default function Form() {
 
 </Sandpack>
 
-Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#examples-dom)
+Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#usage)
 
 For more advanced use cases, the `ref` attribute also accepts a [callback function.](#ref-callback)
 
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 115e6a4cd..356637bcd 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -36,7 +36,7 @@ To create interactive controls for submitting information, render the [built-in
 
 #### Props {/*props*/}
 
-`<form>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<form>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component.
 
@@ -230,7 +230,7 @@ export async function deliverMessage(message) {
 </Sandpack>
 
 [//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
-[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/hooks/useOptimistic).'
+[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
 
 ### Handling form submission errors {/*handling-form-submission-errors*/}
 
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index ec2e1d2ee..586663398 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -162,23 +162,137 @@ Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/
 
 ### Custom HTML elements {/*custom-html-elements*/}
 
-If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
-
-- All custom element props are serialized to strings and are always set using attributes.
-- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
+If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
 If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
 
-<Note>
+#### Setting values on custom elements {/*attributes-vs-properties*/}
+
+Custom elements have two methods of passing data into them:
+
+1) Attributes: Which are displayed in markup and can only be set to string values
+2) Properties: Which are not displayed in markup and can be set to arbitrary JavaScript values
+
+By default, React will pass values bound in JSX as attributes:
+
+```jsx
+<my-element value="Hello, world!"></my-element>
+```
+
+Non-string JavaScript values passed to custom elements will be serialized by default:
+
+```jsx
+// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
+<my-element value={[1,2,3]}></my-element>
+```
+
+React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```js src/MyElement.js active
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    // The value here will be overwritten by React 
+    // when initialized as an element
+    this.value = undefined;
+  }
+
+  connectedCallback() {
+    this.innerHTML = this.value.join(", ");
+  }
+}
+```
 
-[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
+```js src/App.js
+export function App() {
+  return <my-element value={[1,2,3]}></my-element>
+}
+```
 
-You can try it by upgrading React packages to the most recent experimental version:
+</Sandpack>
+
+#### Listening for events on custom elements {/*custom-element-events*/}
+
+A common pattern when using custom elements is that they may dispatch [`CustomEvent`s](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) rather than accept a function to call when an event occur. You can listen for these events using an `on` prefix when binding to the event via JSX.
+
+<Sandpack>
+
+```js src/index.js hidden
+import {MyElement} from './MyElement.js';
+import { createRoot } from 'react-dom/client';
+import {App} from "./App.js";
+
+customElements.define('my-element', MyElement);
+
+const root = createRoot(document.getElementById('root'))
+root.render(<App />);
+```
+
+```javascript src/MyElement.js
+export class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    this.test = undefined;
+    this.emitEvent = this._emitEvent.bind(this);
+  }
+
+  _emitEvent() {
+    const event = new CustomEvent('speak', {
+      detail: {
+        message: 'Hello, world!',
+      },
+    });
+    this.dispatchEvent(event);
+  }
+
+  connectedCallback() {
+    this.el = document.createElement('button');
+    this.el.innerText = 'Say hi';
+    this.el.addEventListener('click', this.emitEvent);
+    this.appendChild(this.el);
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('click', this.emitEvent);
+  }
+}
+```
+
+```jsx src/App.js active
+export function App() {
+  return (
+    <my-element
+      onspeak={e => console.log(e.detail.message)}
+    ></my-element>
+  )
+}
+```
+
+</Sandpack>
+
+<Note>
 
-- `react@experimental`
-- `react-dom@experimental`
+Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events:
 
-Experimental versions of React may contain bugs. Don't use them in production.
+```jsx
+// Listens for `say-hi` events
+<my-element onsay-hi={console.log}></my-element>
+// Listens for `sayHi` events
+<my-element onsayHi={console.log}></my-element>
+```
 
 </Note>
 ---
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index b6214249d..17232ac1d 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -30,7 +30,7 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
 
 #### Props {/*props*/}
 
-`<input>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<input>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 - [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
 
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index 41236eb3d..de7bec3cb 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -30,7 +30,7 @@ To link to external resources such as stylesheets, fonts, and icons, or to annot
 
 #### Props {/*props*/}
 
-`<link>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<link>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 * `rel`: a string, required. Specifies the [relationship to the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). React [treats links with `rel="stylesheet"` differently](#special-rendering-behavior) from other links.
 
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index 2173ce002..20412a32a 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -30,7 +30,7 @@ To add document metadata, render the [built-in browser `<meta>` component](https
 
 #### Props {/*props*/}
 
-`<meta>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<meta>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `<meta>` component does something different depending on which of these props is specified.
 
diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index bd604bcd1..7d6332dee 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -36,7 +36,11 @@ title: "<option>"
 
 #### Пропсы {/*props*/}
 
+<<<<<<< HEAD
 `<option>` поддерживает все [пропсы общих HTML-элементов.](/reference/react-dom/components/common#props)
+=======
+`<option>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Кроме того, `<option>` поддерживает следующие пропсы:
 
diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 4acb4a2b4..f50b8c389 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -30,7 +30,11 @@ title: "<progress>"
 
 #### Пропсы {/*props*/}
 
+<<<<<<< HEAD
 `<progress>` поддерживает все [пропсы общих HTML-элементов.](/reference/react-dom/components/common#props)
+=======
+`<progress>` supports all [common element props.](/reference/react-dom/components/common#common-props)
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Кроме того, `<progress>` поддерживает следующие пропсы:
 
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 6bf3d83c7..6febd8465 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -31,7 +31,7 @@ To add inline or external scripts to your document, render the [built-in browser
 
 #### Props {/*props*/}
 
-`<script>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<script>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 It should have *either* `children` or a `src` prop.
 
diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 0dbdc1537..f30dc53f4 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -36,7 +36,7 @@ To display a select box, render the [built-in browser `<select>`](https://develo
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
 
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index 39df92d9f..b98b6088c 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -30,7 +30,7 @@ To add inline styles to your document, render the [built-in browser `<style>` co
 
 #### Props {/*props*/}
 
-`<style>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<style>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 * `children`: a string, required. The contents of the stylesheet.
 * `precedence`: a string. Tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher". Many style systems can work fine using a single precedence value because style rules are atomic. Stylesheets with the same precedence go together whether they are `<link>` or inline `<style>` tags or loaded using [`preinit`](/reference/react-dom/preinit) functions.
diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 9bd29fa38..963b0b3fd 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -30,7 +30,7 @@ To display a text area, render the [built-in browser `<textarea>`](https://devel
 
 #### Props {/*props*/}
 
-`<textarea>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<textarea>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 You can [make a text area controlled](#controlling-a-text-area-with-a-state-variable) by passing a `value` prop:
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 005939046..9c6d85af8 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -30,7 +30,7 @@ To specify the title of the document, render the [built-in browser `<title>` com
 
 #### Props {/*props*/}
 
-`<title>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<title>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
 * `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
 
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index b5399d182..64af6ee73 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -50,7 +50,11 @@ import { createPortal } from 'react-dom';
 
 * `domNode`: DOM-элемент (например, возвращённый `document.getElementById()`). Он должен существовать к моменту рендера. Если при обновлении передать другой DOM-узел — содержимое портала будет пересоздано.
 
+<<<<<<< HEAD
 * **необязательный** `key`: Уникальная строка или число, используемые как [key](/learn/rendering-lists/#keeping-list-items-in-order-with-key) для портала.
+=======
+* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 #### Возвращаемое значение {/*returns*/}
 
@@ -241,7 +245,11 @@ export default function ModalContent({ onClose }) {
 
 Важно убедиться, что при использовании порталов ваше приложение остаётся доступным. Например, вам может потребоваться управлять фокусом клавиатуры, чтобы пользователь мог перемещать фокус внутрь и наружу из портала естественным способом.
 
+<<<<<<< HEAD
 Следуйте [рекомендациям WAI-ARIA по созданию модальных окон](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal). Если вы используете готовую библиотеку, убедитесь, что она поддерживает доступность и следует этим рекомендациям.
+=======
+Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 </Pitfall>
 
diff --git a/src/content/reference/react-dom/server/index.md b/src/content/reference/react-dom/server/index.md
index bea11603d..72972c327 100644
--- a/src/content/reference/react-dom/server/index.md
+++ b/src/content/reference/react-dom/server/index.md
@@ -4,7 +4,7 @@ title: Server React DOM APIs
 
 <Intro>
 
-The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/server` APIs let you server-side render React components to HTML. These APIs are only used on the server at the top level of your app to generate the initial HTML. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
 
 </Intro>
 
diff --git a/src/content/reference/react-dom/static/index.md b/src/content/reference/react-dom/static/index.md
index 988ec85dc..7bc0fbd6d 100644
--- a/src/content/reference/react-dom/static/index.md
+++ b/src/content/reference/react-dom/static/index.md
@@ -4,7 +4,7 @@ title: Static React DOM APIs
 
 <Intro>
 
-The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
+The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
 
 </Intro>
 
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
index aac6d96b5..4bbf6c35d 100644
--- a/src/content/reference/react-dom/static/prerender.md
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -68,7 +68,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 
 #### Caveats {/*caveats*/}
 
-`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
 
 
 <Note>
@@ -231,7 +231,7 @@ async function renderToString() {
   const {prelude} = await prerender(<App />, {
     bootstrapScripts: ['/main.js']
   });
-  
+
   const reader = prelude.getReader();
   let content = '';
   while (true) {
@@ -317,7 +317,6 @@ Any Suspense boundaries with incomplete children will be included in the prelude
 
 ### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
 
-The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. 
+The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
 
 To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
- 
\ No newline at end of file
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index fb8073ef0..cc99c52d4 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -69,7 +69,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 
 #### Caveats {/*caveats*/}
 
-`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
 
 <Note>
 
@@ -95,7 +95,7 @@ app.use('/', async (request, response) => {
   const { prelude } = await prerenderToNodeStream(<App />, {
     bootstrapScripts: ['/main.js'],
   });
-  
+
   response.setHeader('Content-Type', 'text/plain');
   prelude.pipe(response);
 });
@@ -232,7 +232,7 @@ async function renderToString() {
   const {prelude} = await prerenderToNodeStream(<App />, {
     bootstrapScripts: ['/main.js']
   });
-  
+
   return new Promise((resolve, reject) => {
     let data = '';
     prelude.on('data', chunk => {
@@ -320,4 +320,3 @@ Any Suspense boundaries with incomplete children will be included in the prelude
 The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
 
 To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream).
- 
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
index 8b103938e..09b79c79f 100644
--- a/src/content/reference/react/Activity.md
+++ b/src/content/reference/react/Activity.md
@@ -19,12 +19,11 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 <Intro>
 
-`<Activity>` lets you hide and show part of the UI.
-
+`<Activity>` lets you hide and restore the UI and internal state of its children.
 
 ```js
-<Activity mode={mode}>
-  <Page />
+<Activity mode={visibility}>
+  <Sidebar />
 </Activity>
 ```
 
@@ -38,223 +37,270 @@ Experimental versions of React may contain bugs. Don't use them in production.
 
 ### `<Activity>` {/*activity*/}
 
-Wrap a part of the UI in `<Activity>` to manage its visibility state:
-
-```js
-import {unstable_Activity as Activity} from 'react';
+You can use Activity to hide part of your application:
 
-<Activity mode={isVisible ? 'visible' : 'hidden'}>
-  <Page />
+```js [[1, 1, "\\"hidden\\""], [2, 2, "<Sidebar />"], [3, 1, "\\"visible\\""]]
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
-When "hidden", the `children` of `<Activity />` are not visible on the page. If a new `<Activity>` mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity.
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep>, React will visually hide <CodeStep step={2}>its children</CodeStep> using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions.
+
+While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content.
 
-In the future, "hidden" Activities may automatically destroy state based on resources like memory.
+When the boundary becomes <CodeStep step={3}>visible</CodeStep> again, React will reveal the children with their previous state restored, and re-create their Effects.
+
+In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects.
+
+[See more examples below.](#usage)
 
 #### Props {/*props*/}
 
-* `children`: The actual UI you intend to render.
-* **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed. 
+* `children`: The UI you intend to show and hide.
+* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. 
 
 #### Caveats {/*caveats*/}
 
-- While hidden, the `children` of `<Activity>` are hidden on the page. 
-- `<Activity>` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [`<StrictMode>`](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior.
-- When used with `<ViewTransition>`, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation.
-- Parts of the UI wrapped in `<Activity mode="hidden">` are not included in the SSR response.
-- Parts of the UI wrapped in `<Activity mode="visible">` will hydrate at a lower priority than other content.
+- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation.
 
 ---
 
 ## Usage {/*usage*/}
 
-### Pre-render part of the UI {/*pre-render-part-of-the-ui*/}
+### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/}
 
-You can pre-render part of the UI using `<Activity mode="hidden">`:
+In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition:
 
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
+```jsx
+{isShowingSidebar && (
+  <Sidebar />
+)}
+```
+
+But unmounting a component destroys its internal state, which is not always what you want.
+
+When you hide a component using an Activity boundary instead, React will "save" its state for later:
+
+```jsx
+<Activity mode={isShowingSidebar ? "visible" : "hidden"}>
+  <Sidebar />
 </Activity>
 ```
 
-When an Activity is rendered with `mode="hidden"`, the `children` are not visible on the page, but are rendered at lower priority than the visible content on the page. 
+This makes it possible to hide and then later restore components in the state they were previously in.
 
-When the `mode` later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times.
+The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar.
 
-In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab` component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab` component suspends, causing the button loading state to appear:
+Try expanding the Overview section, and then toggling the sidebar closed then open:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
-import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+```js src/App.js active
+import { useState } from 'react';
+import Sidebar from './Sidebar.js';
+
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('about');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
-      <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
-      >
-        Posts
-      </TabButton>
-      <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
-      >
-        Contact
-      </TabButton>
-      <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+    <>
+      {isShowingSidebar && (
+        <Sidebar />
+      )}
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
   );
 }
 ```
 
+```js src/Sidebar.js
+import { useState } from 'react';
 
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
-      {children}
-    </button>
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```css
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
+```
 
-export default function AboutTab() {
-  return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
-  );
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+</Sandpack>
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
+The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost.
 
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
+This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it.
 
-export default PostsTab;
-```
+Let's replace the conditional rendering of our sidebar with an Activity boundary:
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```jsx {7,9}
+// Before
+{isShowingSidebar && (
+  <Sidebar />
+)}
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
-  );
-}
+// After
+<Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+  <Sidebar />
+</Activity>
 ```
 
+and check out the new behavior:
 
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
+<Sandpack>
 
-let cache = new Map();
+```js src/App.js active
+import { unstable_Activity as Activity, useState } from 'react';
+import Sidebar from './Sidebar.js';
 
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
+export default function App() {
+  const [isShowingSidebar, setIsShowingSidebar] = useState(true);
 
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
-  }
+  return (
+    <>
+      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
+        <Sidebar />
+      </Activity>
+
+      <main>
+        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
+          Toggle sidebar
+        </button>
+        <h1>Main content</h1>
+      </main>
+    </>
+  );
 }
+```
 
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
+```js src/Sidebar.js
+import { useState } from 'react';
+
+export default function Sidebar() {
+  const [isExpanded, setIsExpanded] = useState(false)
+  
+  return (
+    <nav>
+      <button onClick={() => setIsExpanded(!isExpanded)}>
+        Overview
+        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
+          &#9650;
+        </span>
+      </button>
+
+      {isExpanded && (
+        <ul>
+          <li>Section 1</li>
+          <li>Section 2</li>
+          <li>Section 3</li>
+        </ul>
+      )}
+    </nav>
+  );
 }
 ```
 
 ```css
-body { height: 275px; }
-button { margin-right: 10px }
-b { display: inline-block; margin-right: 10px; }
-.pending { color: #777; }
+body { height: 275px; margin: 0; }
+#root {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+nav {
+  padding: 10px;
+  background: #eee;
+  font-size: 14px;
+  height: 100%;
+}
+main {
+  padding: 10px;
+}
+p {
+  margin: 0;
+}
+h1 {
+  margin-top: 10px;
+}
+.indicator {
+  margin-left: 4px;
+  display: inline-block;
+  rotate: 90deg;
+}
+.indicator.down {
+  rotate: 180deg;
+}
 ```
 
 ```json package.json hidden
@@ -276,172 +322,91 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab.
+Our sidebar's internal state is now restored, without any changes to its implementation.
+
+---
+
+### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/}
 
-We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden `<Activity>`: 
+Since Activity boundaries hide their children using `display: none`, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again.
+
+In this example, the Contact tab has a `<textarea>` where the user can enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js 
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
-      </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
-        Posts
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
+      <TabButton
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
+      >
         Contact
       </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'contact' && <Contact />}
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
-
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
-  return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
+```js src/Contact.js active
+export default function Contact() {
   return (
-    <li className="item">
-      {title}
-    </li>
-  );
-}
-
-export default PostsTab;
-```
-
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+    <div>
+      <p>Send me a message!</p>
 
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
       <textarea />
-      <p>
-        You can find me online here:
-      </p>
+
+      <p>You can find me online here:</p>
       <ul>
         <li>admin@mysite.com</li>
         <li>+123456789</li>
       </ul>
-    </ViewTransition>
+    </div>
   );
 }
 ```
 
-
-```js src/data.js hidden
-// Note: the way you would do data fetching depends on
-// the framework that you use together with Suspense.
-// Normally, the caching logic would be inside a framework.
-
-let cache = new Map();
-
-export function fetchData(url) {
-  if (!cache.has(url)) {
-    cache.set(url, getData(url));
-  }
-  return cache.get(url);
-}
-
-async function getData(url) {
-  if (url.startsWith('/posts')) {
-    return await getPosts();
-  } else {
-    throw Error('Not implemented');
-  }
-}
-
-async function getPosts() {
-  // Add a fake delay to make waiting noticeable.
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-  let posts = [];
-  for (let i = 0; i < 10; i++) {
-    posts.push({
-      id: i,
-      title: 'Post #' + (i + 1)
-    });
-  }
-  return posts;
-}
-```
-
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
@@ -468,153 +433,217 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
----
-
-### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/}
-
-
-You can keep state for parts of the UI by switching `<Activity>` from "visible" to "hidden":
-
-```js
-<Activity mode={tab === "posts" ? "visible" : "hidden"}>
-  <PostsTab />
-</Activity>
-```
-
-When an Activity switches from `mode="visible"` to "hidden", the `children` will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state.
-
-When the `mode` later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state.
-
-In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `<textarea>` with a draft message to send. If you enter some text and change to a different tab, then when you click the “Contact” tab again, the draft message is lost:
+This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
 
+If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
 
 <Sandpack>
 
-```js
-import { Suspense, useState } from 'react';
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
 import TabButton from './TabButton.js';
-import AboutTab from './AboutTab.js';
-import PostsTab from './PostsTab.js';
-import ContactTab from './ContactTab.js';
+import Home from './Home.js';
+import Contact from './Contact.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('contact');
 
-export default function TabContainer() {
-  const [tab, setTab] = useState('contact');
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton
-        isActive={tab === 'about'}
-        action={() => setTab('about')}
-      >
-        About
-      </TabButton>
+    <>
       <TabButton
-        isActive={tab === 'posts'}
-        action={() => setTab('posts')}
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
       >
-        Posts
+        Home
       </TabButton>
       <TabButton
-        isActive={tab === 'contact'}
-        action={() => setTab('contact')}
+        isActive={activeTab === 'contact'}
+        onClick={() => setActiveTab('contact')}
       >
         Contact
       </TabButton>
+
       <hr />
-      {tab === 'about' && <AboutTab />}
-      {tab === 'posts' && <PostsTab />}
-      {tab === 'contact' && <ContactTab />}
-    </Suspense>
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'contact' ? 'visible' : 'hidden'}>
+        <Contact />
+      </Activity>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
-import { fetchData } from './data.js';
+```js src/Contact.js 
+export default function Contact() {
+  return (
+    <div>
+      <p>Send me a message!</p>
+
+      <textarea />
+
+      <p>You can find me online here:</p>
+      <ul>
+        <li>admin@mysite.com</li>
+        <li>+123456789</li>
+      </ul>
+    </div>
+  );
+}
+```
+
+```css
+body { height: 275px; }
+button { margin-right: 10px }
+b { display: inline-block; margin-right: 10px; }
+.pending { color: #777; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+Again, the Activity boundary let us preserve the Contact tab's internal state without changing its implementation.
+
+---
+
+### Pre-rendering content that's likely to become visible {/*pre-rendering-content-thats-likely-to-become-visible*/}
+
+So far, we've seen how Activity can hide some content that the user has interacted with, without discarding that content's ephemeral state.
+
+But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
+
+```jsx [[1, 1, "\\"hidden\\""]]
+<Activity mode="hidden">
+  <SlowComponent />
+</Activity>
+```
+
+When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
+
+This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.
+
+Let's look at an example.
+
+In this demo, the Posts tab loads some data. If you press it, you'll see a Suspense fallback displayed while the data is being fetched:
+
+<Sandpack>
+
+```js src/App.js
+import { useState, Suspense } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
 
-function PostsTab() {
-  const posts = use(fetchData('/posts'));
   return (
-    <ViewTransition>
-    <ul className="items">
-      {posts.map(post =>
-        <Post key={post.id} title={post.title} />
-      )}
-    </ul>
-      </ViewTransition>
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
+        Posts
+      </TabButton>
+
+      <hr />
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        {activeTab === 'home' && <Home />}
+        {activeTab === 'posts' && <Posts />}
+      </Suspense>
+    </>
   );
 }
+```
+
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-function Post({ title }) {
   return (
-    <li className="item">
-      {title}
-    </li>
+    <button onClick={onClick}>
+      {children}
+    </button>
   );
 }
+```
 
-export default PostsTab;
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
+import { fetchData } from './data.js';
+
+export default function Posts() {
+  const posts = use(fetchData('/posts'));
 
-export default function ContactTab() {
   return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
+    <ul className="items">
+      {posts.map(post =>
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
+      )}
+    </ul>
   );
 }
 ```
 
-
 ```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
@@ -658,6 +687,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -679,133 +709,94 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
-This results in losing DOM state the user has input. We can keep the state for the Contact tab by hiding the inactive Tabs with `<Activity>`:
+This is because `App` doesn't mount `Posts` until its tab is active.
+
+If we update `App` to use an Activity boundary to show and hide the active tab, `Posts` will be pre-rendered when the app first loads, allowing it to fetch its data before it becomes visible.
 
+Try clicking the Posts tab now:
 
 <Sandpack>
 
-```js
-import { Suspense, useState, unstable_Activity as Activity } from "react";
-import TabButton from "./TabButton.js";
-import AboutTab from "./AboutTab.js";
-import PostsTab from "./PostsTab.js";
-import ContactTab from "./ContactTab.js";
-
-export default function TabContainer() {
-  const [tab, setTab] = useState("about");
+```js src/App.js
+import { useState, Suspense, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Posts from './Posts.js';
+
+export default function App() {
+  const [activeTab, setActiveTab] = useState('home');
+
   return (
-    <Suspense fallback={<h1>🌀 Loading...</h1>}>
-      <TabButton isActive={tab === "about"} action={() => setTab("about")}>
-        About
+    <>
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
       </TabButton>
-      <TabButton isActive={tab === "posts"} action={() => setTab("posts")}>
+      <TabButton
+        isActive={activeTab === 'posts'}
+        onClick={() => setActiveTab('posts')}
+      >
         Posts
       </TabButton>
-      <TabButton isActive={tab === "contact"} action={() => setTab("contact")}>
-        Contact
-      </TabButton>
+
       <hr />
-      <Activity mode={tab === "about" ? "visible" : "hidden"}>
-        <AboutTab />
-      </Activity>
-      <Activity mode={tab === "posts" ? "visible" : "hidden"}>
-        <PostsTab />
-      </Activity>
-      <Activity mode={tab === "contact" ? "visible" : "hidden"}>
-        <ContactTab />
-      </Activity>
-    </Suspense>
+
+      <Suspense fallback={<h1>🌀 Loading...</h1>}>
+        <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+          <Home />
+        </Activity>
+        <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
+          <Posts />
+        </Activity>
+      </Suspense>
+    </>
   );
 }
 ```
 
-
-```js src/TabButton.js active
-import { useTransition } from 'react';
-
-export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+
   return (
-    <button onClick={() => {
-      startTransition(() => {
-        action();
-      });
-    }}>
+    <button onClick={onClick}>
       {children}
     </button>
   );
 }
 ```
 
-```js src/AboutTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function AboutTab() {
+```js src/Home.js
+export default function Home() {
   return (
-    <ViewTransition>
-      <p>Welcome to my profile!</p>
-    </ViewTransition>
+    <p>Welcome to my profile!</p>
   );
 }
 ```
 
-```js src/PostsTab.js hidden
-import {use, unstable_ViewTransition as ViewTransition} from 'react';
+```js src/Posts.js
+import { use } from 'react';
 import { fetchData } from './data.js';
 
-function PostsTab() {
+export default function Posts() {
   const posts = use(fetchData('/posts'));
+
   return (
-    <ViewTransition>
     <ul className="items">
       {posts.map(post =>
-        <Post key={post.id} title={post.title} />
+        <li className="item" key={post.id}>
+          {post.title}
+        </li>
       )}
     </ul>
-      </ViewTransition>
-  );
-}
-
-function Post({ title }) {
-  return (
-    <li className="item">
-      {title}
-    </li>
   );
 }
-
-export default PostsTab;
 ```
 
-```js src/ContactTab.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
-
-export default function ContactTab() {
-  return (
-    <ViewTransition>
-      <p>
-        Send me a message!
-      </p>
-      <textarea />
-      <p>
-        You can find me online here:
-      </p>
-      <ul>
-        <li>admin@mysite.com</li>
-        <li>+123456789</li>
-      </ul>
-    </ViewTransition>
-  );
-}
-```
-
-
 ```js src/data.js hidden
 // Note: the way you would do data fetching depends on
 // the framework that you use together with Suspense.
@@ -849,6 +840,7 @@ body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
 .pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -870,269 +862,511 @@ b { display: inline-block; margin-right: 10px; }
 
 </Sandpack>
 
+`Posts` was able to prepare itself for a faster render, thanks to the hidden Activity boundary.
+
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+Pre-rendering components with hidden Activity boundaries is a powerful way to reduce loading times for parts of the UI that the user is likely to interact with next.
 
-### Effects don't mount when an Activity is hidden {/*effects-dont-mount-when-an-activity-is-hidden*/}
+<Note>
 
-When an `<Activity>` is "hidden", all Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later. 
+**Only Suspense-enabled data sources will be fetched during pre-rendering.** They include:
 
-This is a feature of Activity because it means subscriptions won't be subscribed for hidden parts of the UI, reducing the amount of work for hidden content. It also means cleanup, such as pausing a video (which would be expected if you unmounted without Activity) will fire. When an Activity switches to "visible", it will mount by creating the Effects, which will subscribe and play the video.
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a cached Promise with [`use`](/reference/react/use)
 
-Consider the following example, where a different video is played for each button:
+Activity **does not** detect data that is fetched inside an Effect.
 
+The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
 
-<Sandpack>
+Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React. 
 
-```js
-import { useState, useRef, useEffect } from 'react';
-import './checker.js';
+</Note>
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+---
 
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
+### Speeding up interactions during page load {/*speeding-up-interactions-during-page-load*/}
+
+React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
+
+Suspense boundaries participate in Selective Hydration, because they naturally divide your component tree into units that are independent from one another:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <MessageComposer />
+
+      <Suspense fallback="Loading chats...">
+        <Chats />
+      </Suspense>
+    </>
+  )
 }
+```
+
+Here, `MessageComposer` can be fully hydrated during the initial render of the page, even before `Chats` is mounted and starts to fetch its data.
+
+So by breaking up your component tree into discrete units, Suspense allows React to hydrate your app's server-rendered HTML in chunks, enabling parts of your app to become interactive as fast as possible.
+
+But what about pages that don't use Suspense?
+
+Take this tabs example:
+
+```jsx
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      {activeTab === 'home' && (
+        <Home />
+      )}
+      {activeTab === 'video' && (
+        <Video />
+      )}
+    </>
+  )
+}
+```
+
+Here, React must hydrate the entire page all at once. If `Home` or `Video` are slower to render, they could make the tab buttons feel unresponsive during hydration.
+
+Adding Suspense around the active tab would solve this:
+
+```jsx {13,20}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Suspense fallback={<Placeholder />}>
+        {activeTab === 'home' && (
+          <Home />
+        )}
+        {activeTab === 'video' && (
+          <Video />
+        )}
+      </Suspense>
+    </>
+  )
+}
+```
+
+...but it would also change the UI, since the `Placeholder` fallback would be displayed on the initial render.
+
+Instead, we can use Activity. Since Activity boundaries show and hide their children, they already naturally divide the component tree into independent units. And just like Suspense, this feature allows them to participate in Selective Hydration.
+
+Let's update our example to use Activity boundaries around the active tab:
+
+```jsx {13-18}
+function Page() {
+  const [activeTab, setActiveTab] = useState('home');
+
+  return (
+    <>
+      <TabButton onClick={() => setActiveTab('home')}>
+        Home
+      </TabButton>
+      <TabButton onClick={() => setActiveTab('video')}>
+        Video
+      </TabButton>
+
+      <Activity mode={activeTab === "home" ? "visible" : "hidden"}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === "video" ? "visible" : "hidden"}>
+        <Video />
+      </Activity>
+    </>
+  )
+}
+```
+
+Now our initial server-rendered HTML looks the same as it did in the original version, but thanks to Activity, React can hydrate the tab buttons first, before it even mounts `Home` or `Video`.
+
+---
+
+Thus, in addition to hiding and showing content, Activity boundaries help improve your app's performance during hydration by letting React know which parts of your page can become interactive in isolation.
+
+And even if your page doesn't ever hide part of its content, you can still add always-visible Activity boundaries to improve hydration performance:
+
+```jsx
+function Page() {
+  return (
+    <>
+      <Post />
+
+      <Activity>
+        <Comments />
+      </Activity>
+    </>
+  );
+} 
+```
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My hidden components have unwanted side effects {/*my-hidden-components-have-unwanted-side-effects*/}
+
+An Activity boundary hides its content by setting `display: none` on its children and cleaning up any of their Effects. So, most well-behaved React components that properly clean up their side effects will already be robust to being hidden by Activity.
+
+But there _are_ some situations where a hidden component behaves differently than an unmounted one. Most notably, since a hidden component's DOM is not destroyed, any side effects from that DOM will persist, even after the component is hidden.
+
+As an example, consider a `<video>` tag. Typically it doesn't require any cleanup, because even if you're playing a video, unmounting the tag stops the video and audio from playing in the browser. Try playing the video and then pressing Home in this demo:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
     <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      {video === 1 &&
-        <VideoPlayer key={1}
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
-
-      }
-      {video === 2 && 
-        <VideoPlayer key={2}
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
-      }
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      {activeTab === 'home' && <Home />}
+      {activeTab === 'video' && <Video />}
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-let interval = setInterval(() => {
-  const videos = Array.from(document.querySelectorAll('video'));
-  const playing = videos.filter(
-    (v) => !v.paused
-  );
-  if (playing.length > 1) {
-    console.error(`Multiple playing videos: ${playing.length}`);
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
   }
-    
-}, 50);
+
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
 ```
 
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
+
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+      controls
+      playsInline
+    />
+
+  );
+}
+```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
 ```
 
 </Sandpack>
 
+The video stops playing as expected.
 
-Whenever you change videos and come back, the video re-loads from the beginning. To maintain the state, you may try to render both videos, and hide the inactive video in `display: none`. However, this will cause both videos to play at the same time:
+Now, let's say we wanted to preserve the timecode where the user last watched, so that when they tab back to the video, it doesn't start over from the beginning again.
 
+This is a great use case for Activity!
 
-<Sandpack>
+Let's update `App` to hide the inactive tab with a hidden Activity boundary instead of unmounting it, and see how the demo behaves this time:
 
-```js
-import { useState, useRef, useEffect } from 'react';
-import VideoChecker from './checker.js';
-
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    const videoRef = ref.current;
-    videoRef.play();
-    
-    return () => {
-      videoRef.pause();
-    }
-  }, []);
+<Sandpack>
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
-}
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
     <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      <div style={{display: video === 1 ? 'block' : 'none'}}>
-        <VideoPlayer
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
-
-      </div>
-      <div style={{display: video === 2 ? 'block' : 'none'}}>
-        <VideoPlayer
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
-      </div>
-      <VideoChecker />
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
+      </Activity>
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
+      </Activity>
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
+```js src/Video.js 
+export default function Video() {
+  return (
+    <video
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
 
-    }, 50);
-    
-    return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
-    }
-  });
-  
+  );
 }
-
 ```
 
-
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
-</Sandpack>
-
-This is similar to what would happen if Activity mounted Effects when hidden. Similarly, if Activity didn't unmount Effects when hiding, the videos would continue to play in the background.
-
-Activity solves this by not creating Effects when first rendered as "hidden" and destroying all Effects when switching from "visible" to "hidden":
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "experimental",
+    "react-dom": "experimental",
+    "react-scripts": "latest",
+    "toastify-js": "1.12.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
 
+</Sandpack>
 
-<Sandpack>
+Whoops! The video and audio continue to play even after it's been hidden, because the tab's `<video>` element is still in the DOM.
 
-```js
-import { useState, useRef, useEffect, unstable_Activity as Activity } from 'react';
-import VideoChecker from './checker.js';
+To fix this, we can add an Effect with a cleanup function that pauses the video:
 
-function VideoPlayer({ src, isPlaying }) {
-  const ref = useRef(null);
+```jsx {2,4-10,14}
+export default function VideoTab() {
+  const ref = useRef();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const videoRef = ref.current;
-    videoRef.play();
-    
+
     return () => {
-      videoRef.pause();
+      videoRef.pause()
     }
   }, []);
 
-  return <video ref={ref} src={src} muted loop playsInline/>;
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      src="..."
+    />
+
+  );
 }
+```
+
+We call `useLayoutEffect` instead of `useEffect` because conceptually the clean-up code is tied to the component's UI being visually hidden. If we used a regular effect, the code could be delayed by (say) a re-suspending Suspense boundary or a View Transition.
+
+Let's see the new behavior. Try playing the video, switching to the Home tab, then back to the Video tab:
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, unstable_Activity as Activity } from 'react';
+import TabButton from './TabButton.js';
+import Home from './Home.js';
+import Video from './Video.js';
 
 export default function App() {
-  const [video, setVideo] = useState(1);
+  const [activeTab, setActiveTab] = useState('video');
+
   return (
     <>
-      <div>
-        <button onClick={() => setVideo(1)}>Big Buck Bunny</button>
-        <button onClick={() => setVideo(2)}>Elephants Dream</button>
-      </div>
-      <Activity mode={video === 1 ? 'visible' : 'hidden'}>
-        <VideoPlayer
-          // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
-          src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" />
+      <TabButton
+        isActive={activeTab === 'home'}
+        onClick={() => setActiveTab('home')}
+      >
+        Home
+      </TabButton>
+      <TabButton
+        isActive={activeTab === 'video'}
+        onClick={() => setActiveTab('video')}
+      >
+        Video
+      </TabButton>
+
+      <hr />
+
+      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
+        <Home />
       </Activity>
-      <Activity mode={video === 2 ? 'visible' : 'hidden'}>
-        <VideoPlayer
-          // 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org
-          src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
-        />
+      <Activity mode={activeTab === 'video' ? 'visible' : 'hidden'}>
+        <Video />
       </Activity>
-      <VideoChecker />
     </>
   );
 }
 ```
 
-```js src/checker.js hidden
-import {useRef, useEffect} from 'react';
+```js src/TabButton.js hidden
+export default function TabButton({ onClick, children, isActive }) {
+  if (isActive) {
+    return <b>{children}</b>
+  }
 
-export default function VideoChecker() {
-  const hasLogged = useRef(false);
+  return (
+    <button onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+```
 
-  useEffect(() => {
-    let interval = setInterval(() => {
-      if (hasLogged.current === false) {
+```js src/Home.js
+export default function Home() {
+  return (
+    <p>Welcome to my profile!</p>
+  );
+}
+```
 
-        const videos = Array.from(document.querySelectorAll('video'));
-        const playing = videos.filter(
-          (v) => !v.paused
-        );
-        if (hasLogged.current === false && playing.length > 1) {
-          hasLogged.current = true;
-          console.error(`Multiple playing videos: ${playing.length}`);
-        }
-      }
+```js src/Video.js 
+import { useRef, useLayoutEffect } from 'react';
+
+export default function Video() {
+  const ref = useRef();
+
+  useLayoutEffect(() => {
+    const videoRef = ref.current
 
-    }, 50);
-    
     return () => {
-      hasLogged.current = false;
-      clearInterval(interval);
-    }
-  });
-  
-}
+      videoRef.pause()
+    };
+  }, [])
 
+  return (
+    <video
+      ref={ref}
+      controls
+      playsInline
+      // 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org
+      src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
+    />
+
+  );
+}
 ```
 
 ```css
 body { height: 275px; }
 button { margin-right: 10px }
 b { display: inline-block; margin-right: 10px; }
-video { width: 300px; margin-top: 10px; }
+.pending { color: #777; }
+video { width: 300px; margin-top: 10px; aspect-ratio: 16/9; }
 ```
 
 ```json package.json hidden
@@ -1154,8 +1388,31 @@ video { width: 300px; margin-top: 10px; }
 
 </Sandpack>
 
-For this reason, it's best to think of Activity conceptually as "unmounting" and "remounting" the component, but saving the React or DOM state for later. In practice, this works as expected if you have followed the [You Might Not Need an Effect](learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
+It works great! Our cleanup function ensures that the video stops playing if it's ever hidden by an Activity boundary, and even better, because the `<video>` tag is never destroyed, the timecode is preserved, and the video itself doesn't need to be initialized or downloaded again when the user switches back to keep watching it.
+
+This is a great example of using Activity to preserve ephemeral DOM state for parts of the UI that become hidden, but the user is likely to interact with again soon.
+
+---
+
+Our example illustrates that for certain tags like `<video>`, unmounting and hiding have different behavior. If a component renders DOM that has a side effect, and you want to prevent that side effect when an Activity boundary hides it, add an Effect with a return function to clean it up.
+
+The most common cases of this will be from the following tags:
+
+  - `<video>`
+  - `<audio>`
+  - `<iframe>`
+
+Typically, though, most of your React components should already be robust to being hidden by an Activity boundary. And conceptually, you should think of "hidden" Activities as being unmounted.
+
+To eagerly discover other Effects that don't have proper cleanup, which is important not only for Activity boundaries but for many other behaviors in React, we recommend using [`<StrictMode>`](/reference/react/StrictMode). 
+
+---
+
+
+### My hidden components have Effects that aren't running {/*my-hidden-components-have-effects-that-arent-running*/}
+
+When an `<Activity>` is "hidden", all its children's Effects are cleaned up. Conceptually, the children are unmounted, but React saves their state for later. This is a feature of Activity because it means subscriptions won't be active for hidden parts of the UI, reducing the amount of work needed for hidden content.
 
-### My hidden Activity is not rendered in SSR {/*my-hidden-activity-is-not-rendered-in-ssr*/}
+If you're relying on an Effect mounting to clean up a component's side effects, refactor the Effect to do the work in the returned cleanup function instead.
 
-When you use `<Activity mode="hidden">` during server-side rendering, the content of the Activity will not be included in the SSR response. This is because the content is not visible on the page and is not needed for the initial render. If you need to include the content in the SSR response, you can use a different approach like [`useDeferredValue`](/reference/react/useDeferredValue) to defer rendering of the content.
+To eagerly find problematic Effects, we recommend adding [`<StrictMode>`](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side-effects. 
\ No newline at end of file
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 8e58af8ff..09acbc7d6 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -1814,9 +1814,9 @@ function Form() {
 
 export default function MyApp() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 ```
@@ -1900,9 +1900,9 @@ function Form() {
 
 export default function MyApp() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 ```
diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index b0dc7b571..653a06a63 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -143,7 +143,7 @@ In the future, CSS libraries may add built-in animations using View Transition C
 
 #### Caveats {/*caveats*/}
 
-- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/link-to-suspense-below).
+- By default, `setState` updates immediately and does not activate `<ViewTransition>`, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [`<Suspense>`](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/reference/react/Suspense#revealing-content-together-at-once).
 - `<ViewTransition>` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `<ViewTransition>` boundaries manually as a result.
 - Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets.
 - Currently, `<ViewTransition>` only works in the DOM. We're working on adding support for React Native and other platforms.
diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index cbab4a0e6..6cb990908 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -11,7 +11,6 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo
 ---
 
 * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
-* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
 * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
 * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
index 6d8cc502d..7e4fe79fe 100644
--- a/src/content/reference/react/captureOwnerStack.md
+++ b/src/content/reference/react/captureOwnerStack.md
@@ -57,7 +57,7 @@ If no Owner Stack is available, `null` is returned (see [Troubleshooting: The Ow
 
 #### Owner Stack vs Component Stack {/*owner-stack-vs-component-stack*/}
 
-The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors).
+The Owner Stack is different from the Component Stack available in React error handlers like [`errorInfo.componentStack` in `onUncaughtError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production).
 
 For example, consider the following code:
 
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
index 6bcea51b0..4e29ff203 100644
--- a/src/content/reference/react/cloneElement.md
+++ b/src/content/reference/react/cloneElement.md
@@ -414,9 +414,9 @@ export default function List({ items, renderItem }) {
       {items.map((item, index) => {
         const isHighlighted = index === selectedIndex;
         return (
-          <HighlightContext.Provider key={item.id} value={isHighlighted}>
+          <HighlightContext key={item.id} value={isHighlighted}>
             {renderItem(item)}
-          </HighlightContext.Provider>
+          </HighlightContext>
         );
       })}
 ```
@@ -472,12 +472,12 @@ export default function List({ items, renderItem }) {
       {items.map((item, index) => {
         const isHighlighted = index === selectedIndex;
         return (
-          <HighlightContext.Provider
+          <HighlightContext
             key={item.id}
             value={isHighlighted}
           >
             {renderItem(item)}
-          </HighlightContext.Provider>
+          </HighlightContext>
         );
       })}
       <hr />
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index 03b09f8af..2161fa63c 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -38,14 +38,15 @@ const ThemeContext = createContext('light');
 
 `createContext` returns a context object.
 
-**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
+**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
 
-* `SomeContext.Provider` lets you provide the context value to components.
+* `SomeContext` lets you provide the context value to components.
 * `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
+* `SomeContext.Provider` is a legacy way to provide the context value before React 19.
 
 ---
 
-### `SomeContext.Provider` {/*provider*/}
+### `SomeContext` Provider {/*provider*/}
 
 Wrap your components into a context provider to specify the value of this context for all components inside:
 
@@ -54,13 +55,21 @@ function App() {
   const [theme, setTheme] = useState('light');
   // ...
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext value={theme}>
       <Page />
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 }
 ```
 
+<Note>
+
+Starting in React 19, you can render `<SomeContext>` as a provider. 
+
+In older versions of React, use `<SomeContext.Provider>`.
+
+</Note>
+
 #### Props {/*provider-props*/}
 
 * `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
@@ -141,11 +150,11 @@ function App() {
   // ...
 
   return (
-    <ThemeContext.Provider value={theme}>
-      <AuthContext.Provider value={currentUser}>
+    <ThemeContext value={theme}>
+      <AuthContext value={currentUser}>
         <Page />
-      </AuthContext.Provider>
-    </ThemeContext.Provider>
+      </AuthContext>
+    </ThemeContext>
   );
 }
 ```
@@ -187,11 +196,11 @@ import { ThemeContext, AuthContext } from './Contexts.js';
 function App() {
   // ...
   return (
-    <ThemeContext.Provider value={theme}>
-      <AuthContext.Provider value={currentUser}>
+    <ThemeContext value={theme}>
+      <AuthContext value={currentUser}>
         <Page />
-      </AuthContext.Provider>
-    </ThemeContext.Provider>
+      </AuthContext>
+    </ThemeContext>
   );
 }
 ```
@@ -214,4 +223,3 @@ const ThemeContext = createContext('light');
 This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
 
 To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
-
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index 5b0e679b8..d035b9741 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -6,7 +6,7 @@ title: forwardRef
 
 In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
 
-`forwardRef` will deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).
+`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).
 
 </Deprecated>
 
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index a68ddc014..6d899f548 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -29,6 +29,14 @@ React-dom contains features that are only supported for web applications (which
 * [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
 * [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
 
+## React Compiler {/*react-compiler*/}
+
+The React Compiler is a build-time optimization tool that automatically memoizes your React components and values:
+
+* [Configuration](/reference/react-compiler/configuration) - Configuration options for React Compiler.
+* [Directives](/reference/react-compiler/directives) - Function-level directives to control compilation.
+* [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Guide for shipping pre-compiled library code.
+
 ## Rules of React {/*rules-of-react*/}
 
 React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md
index b22a9c97e..f4e3ebe28 100644
--- a/src/content/reference/react/legacy.md
+++ b/src/content/reference/react/legacy.md
@@ -30,6 +30,6 @@ These APIs were removed in React 19:
 * [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead.
 * Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead.
 * Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead.
-* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead.
+* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead.
 * Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead.
 * Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead.
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index 84748dd66..1ac7cb7ec 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -12,6 +12,12 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically applies the equivalent of `memo` to all components, reducing the need for manual memoization. You can use the compiler to handle component memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
@@ -112,7 +118,11 @@ label {
 
 #### Нужно ли везде добавлять memo? {/*should-you-add-memo-everywhere*/}
 
+<<<<<<< HEAD
 Если ваше приложение похоже на текущий сайт, и большинство взаимодействий глобальные (как замена страницы или целого раздела), в мемоизации нет необходимости. С другой стороны, если ваше приложение похоже на приложение для рисования и редактирования, и большинство взаимодействий более детальные (как перемещение фигур), мемоизация может оказаться очень полезной. 
+=======
+If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Оптимизация с `memo`  является очень ценной, когда ваш компонент повторно рендерится с абсолютно одинаковыми пропсами, и повторная отрисовка очень дорогостоящая. Если при повторном рендере нет заметной задержки, использовать `memo` необязательно. Учтите, что `memo` будет абсолютно бесполезным решением, если передаваемые пропсы *всегда разные*, например, при передаче объектов или функций, которые создаются каждый раз с нуля. Именно поэтому, чаще всего вам нужно использовать  [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) и [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) в паре с `memo`.
 
@@ -222,16 +232,16 @@ export default function MyApp() {
   const [theme, setTheme] = useState('dark');
 
   function handleClick() {
-    setTheme(theme === 'dark' ? 'light' : 'dark'); 
+    setTheme(theme === 'dark' ? 'light' : 'dark');
   }
 
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext value={theme}>
       <button onClick={handleClick}>
         Switch theme
       </button>
       <Greeting name="Taylor" />
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 }
 
@@ -357,7 +367,93 @@ function arePropsEqual(oldProps, newProps) {
 
 ---
 
+<<<<<<< HEAD
 ## Устранение неполадок {/*troubleshooting*/}
 ### Мой компонент рендерится повторно, если проп это объект, массив или функция {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+=======
+### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
+
+When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
+
+Here's how it works:
+
+**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
+
+```js
+// Parent re-renders every second
+function Parent() {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <h1>Seconds: {seconds}</h1>
+      <ExpensiveChild name="John" />
+    </>
+  );
+}
+
+// Without memo, this re-renders every second even though props don't change
+const ExpensiveChild = memo(function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+});
+```
+
+**With React Compiler enabled**, the same optimization happens automatically:
+
+```js
+// No memo needed - compiler prevents re-renders automatically
+function ExpensiveChild({ name }) {
+  console.log('ExpensiveChild rendered');
+  return <div>Hello, {name}!</div>;
+}
+```
+
+Here's the key part of what the React Compiler generates:
+
+```js {6-12}
+function Parent() {
+  const $ = _c(7);
+  const [seconds, setSeconds] = useState(0);
+  // ... other code ...
+
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <ExpensiveChild name="John" />;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  // ... return statement ...
+}
+```
+
+Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
+
+The React Compiler automatically:
+1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
+2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
+3. Skips re-rendering `ExpensiveChild` entirely
+
+This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
+
+<Note>
+
+The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree.
+
+</Note>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 React поверхностно сравнивает старые и новые пропсы: это значит, что проверяется ссылка старого и нового пропа. Если вы создаёте новый объект или массив, родительский компонент рендерится повторно, даже если конкретный элемент каждый раз такой же, React по прежнему будет считать, что он изменился. Тоже самое происходит, когда вы создаёте функцию, при рендере родительского компонента, React будет считать, что она изменилась даже, если определение функции осталось прежним. Чтобы избежать такого поведения, [делайте пропсы проще или мемоизируйте пропсы родительского компонента](#minimizing-props-changes).
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 557a71cad..5daae72f0 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -74,9 +74,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the
 ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
 function MyPage() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 }
 
@@ -116,9 +116,9 @@ const ThemeContext = createContext(null);
 
 export default function MyApp() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 
@@ -312,7 +312,7 @@ export default async function App() {
 }
 ```
 
-But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
+But using `await` in a [Server Component](/reference/rsc/server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index a78eb73e6..9587b08a5 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -12,6 +12,12 @@ const cachedFn = useCallback(fn, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index ce06e7035..f69c49af9 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -38,11 +38,11 @@ function MyComponent() {
 
 #### Returns {/*returns*/}
 
-`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
+`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes.
 
 #### Caveats {/*caveats*/}
 
-* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `<Context.Provider>` **needs to be *above*** the component doing the `useContext()` call.
+* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `<Context>` **needs to be *above*** the component doing the `useContext()` call.
 * React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values.
 * If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison.
 
@@ -70,9 +70,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the
 ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
 function MyPage() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 }
 
@@ -98,9 +98,9 @@ const ThemeContext = createContext(null);
 
 export default function MyApp() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 
@@ -183,14 +183,14 @@ Often, you'll want the context to change over time. To update context, combine i
 function MyPage() {
   const [theme, setTheme] = useState('dark');
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext value={theme}>
       <Form />
       <Button onClick={() => {
         setTheme('light');
       }}>
         Switch to light theme
       </Button>
-    </ThemeContext.Provider>
+    </ThemeContext>
   );
 }
 ```
@@ -213,7 +213,7 @@ const ThemeContext = createContext(null);
 export default function MyApp() {
   const [theme, setTheme] = useState('light');
   return (
-    <ThemeContext.Provider value={theme}>
+    <ThemeContext value={theme}>
       <Form />
       <label>
         <input
@@ -225,7 +225,7 @@ export default function MyApp() {
         />
         Use dark mode
       </label>
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 
@@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null);
 export default function MyApp() {
   const [currentUser, setCurrentUser] = useState(null);
   return (
-    <CurrentUserContext.Provider
+    <CurrentUserContext
       value={{
         currentUser,
         setCurrentUser
       }}
     >
       <Form />
-    </CurrentUserContext.Provider>
+    </CurrentUserContext>
   );
 }
 
@@ -411,8 +411,8 @@ export default function MyApp() {
   const [theme, setTheme] = useState('light');
   const [currentUser, setCurrentUser] = useState(null);
   return (
-    <ThemeContext.Provider value={theme}>
-      <CurrentUserContext.Provider
+    <ThemeContext value={theme}>
+      <CurrentUserContext
         value={{
           currentUser,
           setCurrentUser
@@ -429,8 +429,8 @@ export default function MyApp() {
           />
           Use dark mode
         </label>
-      </CurrentUserContext.Provider>
-    </ThemeContext.Provider>
+      </CurrentUserContext>
+    </ThemeContext>
   )
 }
 
@@ -596,16 +596,16 @@ export default function MyApp() {
 function MyProviders({ children, theme, setTheme }) {
   const [currentUser, setCurrentUser] = useState(null);
   return (
-    <ThemeContext.Provider value={theme}>
-      <CurrentUserContext.Provider
+    <ThemeContext value={theme}>
+      <CurrentUserContext
         value={{
           currentUser,
           setCurrentUser
         }}
       >
         {children}
-      </CurrentUserContext.Provider>
-    </ThemeContext.Provider>
+      </CurrentUserContext>
+    </ThemeContext>
   );
 }
 
@@ -775,11 +775,11 @@ export function TasksProvider({ children }) {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider value={dispatch}>
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 
@@ -978,9 +978,9 @@ export default function MyApp() {
   const [theme, setTheme] = useState('light');
   return (
     <>
-      <ThemeContext.Provider value={theme}>
+      <ThemeContext value={theme}>
         <Form />
-      </ThemeContext.Provider>
+      </ThemeContext>
       <Button onClick={() => {
         setTheme(theme === 'dark' ? 'light' : 'dark');
       }}>
@@ -1067,13 +1067,13 @@ function Button({ children, onClick }) {
 You can override the context for a part of the tree by wrapping that part in a provider with a different value.
 
 ```js {3,5}
-<ThemeContext.Provider value="dark">
+<ThemeContext value="dark">
   ...
-  <ThemeContext.Provider value="light">
+  <ThemeContext value="light">
     <Footer />
-  </ThemeContext.Provider>
+  </ThemeContext>
   ...
-</ThemeContext.Provider>
+</ThemeContext>
 ```
 
 You can nest and override providers as many times as you need.
@@ -1093,9 +1093,9 @@ const ThemeContext = createContext(null);
 
 export default function MyApp() {
   return (
-    <ThemeContext.Provider value="dark">
+    <ThemeContext value="dark">
       <Form />
-    </ThemeContext.Provider>
+    </ThemeContext>
   )
 }
 
@@ -1104,9 +1104,9 @@ function Form() {
     <Panel title="Welcome">
       <Button>Sign up</Button>
       <Button>Log in</Button>
-      <ThemeContext.Provider value="light">
+      <ThemeContext value="light">
         <Footer />
-      </ThemeContext.Provider>
+      </ThemeContext>
     </Panel>
   );
 }
@@ -1230,9 +1230,9 @@ export default function Section({ children }) {
   const level = useContext(LevelContext);
   return (
     <section className="section">
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -1302,9 +1302,9 @@ function MyApp() {
   }
 
   return (
-    <AuthContext.Provider value={{ currentUser, login }}>
+    <AuthContext value={{ currentUser, login }}>
       <Page />
-    </AuthContext.Provider>
+    </AuthContext>
   );
 }
 ```
@@ -1330,9 +1330,9 @@ function MyApp() {
   }), [currentUser, login]);
 
   return (
-    <AuthContext.Provider value={contextValue}>
+    <AuthContext value={contextValue}>
       <Page />
-    </AuthContext.Provider>
+    </AuthContext>
   );
 }
 ```
@@ -1349,8 +1349,8 @@ Read more about [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-co
 
 There are a few common ways that this can happen:
 
-1. You're rendering `<SomeContext.Provider>` in the same component (or below) as where you're calling `useContext()`. Move `<SomeContext.Provider>` *above and outside* the component calling `useContext()`.
-2. You may have forgotten to wrap your component with `<SomeContext.Provider>`, or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [React DevTools.](/learn/react-developer-tools)
+1. You're rendering `<SomeContext>` in the same component (or below) as where you're calling `useContext()`. Move `<SomeContext>` *above and outside* the component calling `useContext()`.
+2. You may have forgotten to wrap your component with `<SomeContext>`, or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [React DevTools.](/learn/react-developer-tools)
 3. You might be running into some build issue with your tooling that causes `SomeContext` as seen from the providing component and `SomeContext` as seen by the reading component to be two different objects. This can happen if you use symlinks, for example. You can verify this by assigning them to globals like `window.SomeContext1` and `window.SomeContext2` and then checking whether `window.SomeContext1 === window.SomeContext2` in the console. If they're not the same, fix that issue on the build tool level.
 
 ### I am always getting `undefined` from my context although the default value is different {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
@@ -1359,9 +1359,9 @@ You might have a provider without a `value` in the tree:
 
 ```js {1,2}
 // 🚩 Doesn't work: no value prop
-<ThemeContext.Provider>
+<ThemeContext>
    <Button />
-</ThemeContext.Provider>
+</ThemeContext>
 ```
 
 If you forget to specify `value`, it's like passing `value={undefined}`.
@@ -1370,18 +1370,18 @@ You may have also mistakingly used a different prop name by mistake:
 
 ```js {1,2}
 // 🚩 Doesn't work: prop should be called "value"
-<ThemeContext.Provider theme={theme}>
+<ThemeContext theme={theme}>
    <Button />
-</ThemeContext.Provider>
+</ThemeContext>
 ```
 
 In both of these cases you should see a warning from React in the console. To fix them, call the prop `value`:
 
 ```js {1,2}
 // ✅ Passing the value prop
-<ThemeContext.Provider value={theme}>
+<ThemeContext value={theme}>
    <Button />
-</ThemeContext.Provider>
+</ThemeContext>
 ```
 
-Note that the [default value from your `createContext(defaultValue)` call](#specifying-a-fallback-default-value) is only used **if there is no matching provider above at all.** If there is a `<SomeContext.Provider value={undefined}>` component somewhere in the parent tree, the component calling `useContext(SomeContext)` *will* receive `undefined` as the context value.
+Note that the [default value from your `createContext(defaultValue)` call](#specifying-a-fallback-default-value) is only used **if there is no matching provider above at all.** If there is a `<SomeContext value={undefined}>` component somewhere in the parent tree, the component calling `useContext(SomeContext)` *will* receive `undefined` as the context value.
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index e3048e4e4..0f1868718 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -896,7 +896,11 @@ button { margin: 5px; }
 
 ### Получение данных в эффекте {/*fetching-data-with-effects*/}
 
+<<<<<<< HEAD
 В эффекте можно запрашивать для компонента данные. [Если вы используете фреймворк,](/learn/start-a-new-react-project#production-grade-react-frameworks) то будет эффективнее воспользоваться встроенным в ваш фреймворк механизмом получения данных, чем вручную писать собственные эффекты.
+=======
+You can use an Effect to fetch data for your component. Note that [if you use a framework,](/learn/start-a-new-react-project#full-stack-frameworks) using your framework's data fetching mechanism will be a lot more efficient than writing Effects manually.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Если вы всё же хотите вручную в эффекте запрашивать данные, то можно написать, например, такой код:
 
@@ -1048,8 +1052,13 @@ export async function fetchBio(person) {
 
 Эти недостатки не являются какой-то особенностью именно React. Такие же проблемы получения данных при монтировании будут и с любой другой библиотекой. Как и маршрутизацию, нельзя просто взять и правильно реализовать получение данных -- поэтому мы рекомендуем следующие подходы:
 
+<<<<<<< HEAD
 - **Если вы используете [фреймворк](/learn/start-a-new-react-project#production-grade-react-frameworks), то возьмите встроенный в него механизм получения данных.** В современные React-фреймворки уже встроены эффективные механизмы получения данных без перечисленных недостатков.
 - **Если нет, то попробуйте написать или использовать готовый клиентский кэш.** [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), и [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview) -- примеры популярных готовых решений с открытым исходным кодом. Создать собственное решение тоже можно: под капотом будут эффекты, но также и логика для дедупликации запросов, кэширования ответов и предотвращения водопадов (через предзагрузку или через перенос на уровень маршрутов требований, какие данные будут нужны).
+=======
+- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 Получать данные прямо в эффекте -- всё ещё вполне приемлемый вариант, если ничто из перечисленного вам не подходит.
 
@@ -1733,7 +1742,11 @@ function Page({ url, shoppingCart }) {
 
 ### Отображение разного содержимого на сервере и на клиенте {/*displaying-different-content-on-the-server-and-the-client*/}
 
+<<<<<<< HEAD
 Если в вашем приложении есть серверный рендеринг ([ручной](/reference/react-dom/server) или через [фреймворк](/learn/start-a-new-react-project#production-grade-react-frameworks)), то ваши компоненты будут рендериться в двух разных окружениях. Один рендеринг на сервере создаст первоначальный HTML, и один рендеринг на клиенте к этому HTML подключит обработчики событий. Поэтому для правильной работы [гидратации](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) первоначальный рендеринг на сервере и на клиенте должны давать одинаковый результат.
+=======
+If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/start-a-new-react-project#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 При этом изредка вам может понадобиться отобразить на клиенте другое содержимое. Например, если ваше приложение читает данные из [`localStorage`](https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage) -- что в принципе невозможно делать на сервере. В таком случае разное отображение можно реализовать вот так:
 
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 11fd95e18..d2157668d 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -133,7 +133,11 @@ function useCSS(rule) {
 
 #### Почему это лучше чем внедрение стилей во время рендера или использование useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
+<<<<<<< HEAD
 Если вы вставляете стили во время рендеринга, и React обрабатывает [неблокирующее обновление,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) браузер будет пересчитывать стили на каждом кадре во время рендеринга дерева компонентов, что может быть **чрезвычайно медленным.**
+=======
+If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#perform-non-blocking-updates-with-actions) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+>>>>>>> 2774ddfa0c39b8c2f0563b987dcb90a01ee723cf
 
 `useInsertionEffect` лучше, чем вставка стилей во время [`useLayoutEffect`](/reference/react/useLayoutEffect) или [`useEffect`](/reference/react/useEffect) потому что это гарантирует, что к тому времени, как другие эффекты запускаются в ваших компонентах, теги `<style>` уже будут вставлены. В противном случае расчёты компоновки в обычных эффектах будут неверными из-за устаревших стилей.
 
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index c2004abca..d406ddeed 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -12,6 +12,12 @@ const cachedValue = useMemo(calculateValue, dependencies)
 
 </Intro>
 
+<Note>
+
+[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+
+</Note>
+
 <InlineToc />
 
 ---
diff --git a/src/content/reference/rsc/directives.md b/src/content/reference/rsc/directives.md
index c17bcf3a8..fe614fb27 100644
--- a/src/content/reference/rsc/directives.md
+++ b/src/content/reference/rsc/directives.md
@@ -10,7 +10,7 @@ Directives are for use in [React Server Components](/reference/rsc/server-compon
 
 <Intro>
 
-Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Directives provide instructions to [bundlers compatible with React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
 
 </Intro>
 
diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index 9e6ab11eb..f27fa8b86 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -4,7 +4,7 @@ title: Server Components
 
 <RSC>
 
-Server Components are for use in [React Server Components](/learn/start-a-new-react-project#bleeding-edge-react-frameworks).
+Server Components are for use in [React Server Components](/learn/start-a-new-react-project#full-stack-frameworks).
 
 </RSC>
 
@@ -22,7 +22,7 @@ This separate environment is the "server" in React Server Components. Server Com
 
 #### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
 
-While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
+While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
 
 To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
 
@@ -45,7 +45,7 @@ function Page({page}) {
       setContent(data.content);
     });
   }, [page]);
-  
+
   return <div>{sanitizeHtml(marked(content))}</div>;
 }
 ```
@@ -69,7 +69,7 @@ import sanitizeHtml from 'sanitize-html'; // Not included in bundle
 async function Page({page}) {
   // NOTE: loads *during* render, when the app is built.
   const content = await file.readFile(`${page}.md`);
-  
+
   return <div>{sanitizeHtml(marked(content))}</div>;
 }
 ```
@@ -113,7 +113,7 @@ function Note({id}) {
       setNote(data.note);
     });
   }, [id]);
-  
+
   return (
     <div>
       <Author id={note.authorId} />
@@ -253,7 +253,7 @@ This works by first rendering `Notes` as a Server Component, and then instructin
       <p>this is the second note</p>
     </Expandable>
     <!--...-->
-  </div> 
+  </div>
 </body>
 ```
 
@@ -270,8 +270,8 @@ import db from './database';
 async function Page({id}) {
   // Will suspend the Server Component.
   const note = await db.notes.get(id);
-  
-  // NOTE: not awaited, will start here and await on the client. 
+
+  // NOTE: not awaited, will start here and await on the client.
   const commentsPromise = db.comments.get(note.id);
   return (
     <div>
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 770f5a705..2603c1099 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a
 
 </Note>
 
-When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
 
 Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
 
diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md
index e259585c4..5a0a7d96b 100644
--- a/src/content/reference/rsc/use-client.md
+++ b/src/content/reference/rsc/use-client.md
@@ -41,7 +41,7 @@ export default function RichTextEditor({ timestamp, text }) {
 }
 ```
 
-When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code.
+When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#full-stack-frameworks) will treat the module import as a boundary between server-run and client-run code.
 
 As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code.
 
diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index 58b1f0ee1..359637aa7 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -95,7 +95,7 @@ Notably, these are not supported:
 * Events from event handlers
 
 
-Supported serializable return values are the same as [serializable props](/reference/rsc/use-client#passing-props-from-server-to-client-components) for a boundary Client Component.
+Supported serializable return values are the same as [serializable props](/reference/rsc/use-client#serializable-types) for a boundary Client Component.
 
 
 ## Usage {/*usage*/}
diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md
index d3d54560e..6da6d49bb 100644
--- a/src/content/reference/rules/components-and-hooks-must-be-pure.md
+++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md
@@ -207,7 +207,7 @@ A component's props and state are immutable [snapshots](learn/state-as-a-snapsho
 You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered.
 
 ### Don't mutate Props {/*props*/}
-Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug since it may or may not work depending on the circumstance.
+Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances.
 
 ```js {2}
 function Post({ item }) {
@@ -307,7 +307,7 @@ function useIconStyle(icon) {
 }
 ```
 
-If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect,  so it's important to avoid doing that.
+If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect,  so it's important to avoid doing that.
 
 ```js {4}
 style = useIconStyle(icon);         // `style` is memoized based on `icon`
@@ -327,7 +327,7 @@ Similarly, it's important to not modify the return values of Hooks, as they may
 
 ## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/}
 
-Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created.
+Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created.
 
 When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output.
 
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
index a67c5742d..c8cf28ad8 100644
--- a/src/pages/errors/[errorCode].tsx
+++ b/src/pages/errors/[errorCode].tsx
@@ -26,7 +26,7 @@ export default function ErrorDecoderPage({
   );
 
   return (
-    <ErrorDecoderContext.Provider value={{errorMessage, errorCode}}>
+    <ErrorDecoderContext value={{errorMessage, errorCode}}>
       <Page
         toc={[]}
         meta={{
@@ -48,7 +48,7 @@ export default function ErrorDecoderPage({
           <ErrorDecoder />
         </MaxWidth> */}
       </Page>
-    </ErrorDecoderContext.Provider>
+    </ErrorDecoderContext>
   );
 }
 
diff --git a/src/sidebarHome.json b/src/sidebarHome.json
index 4509c26fc..f23b8bb1e 100644
--- a/src/sidebarHome.json
+++ b/src/sidebarHome.json
@@ -14,6 +14,10 @@
       "title": "Installation",
       "path": "/learn/installation"
     },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler"
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "LEARN REACT"
@@ -74,6 +78,22 @@
       "title": "Server APIs",
       "path": "/reference/react-dom/server"
     },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "REACT COMPILER API"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration"
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives"
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "GET INVOLVED"
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 2d48daa3d..048dc3314 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -53,11 +53,29 @@
         {
           "title": "React Developer Tools",
           "path": "/learn/react-developer-tools"
+        }
+      ]
+    },
+    {
+      "title": "React Compiler",
+      "path": "/learn/react-compiler",
+      "canary": true,
+      "routes": [
+        {
+          "title": "Introduction",
+          "path": "/learn/react-compiler/introduction"
+        },
+        {
+          "title": "Installation",
+          "path": "/learn/react-compiler/installation"
+        },
+        {
+          "title": "Incremental Adoption",
+          "path": "/learn/react-compiler/incremental-adoption"
         },
         {
-          "title": "React Compiler",
-          "path": "/learn/react-compiler",
-          "canary": true
+          "title": "Debugging and Troubleshooting",
+          "path": "/learn/react-compiler/debugging"
         }
       ]
     },
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 5e3939842..59f472084 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -127,7 +127,8 @@
         {
           "title": "cache",
           "path": "/reference/react/cache"
-        },        {
+        },
+        {
           "title": "captureOwnerStack",
           "path": "/reference/react/captureOwnerStack"
         },
@@ -324,6 +325,54 @@
         }
       ]
     },
+    {
+      "hasSectionHeader": true,
+      "sectionHeader": "React Compiler"
+    },
+    {
+      "title": "Configuration",
+      "path": "/reference/react-compiler/configuration",
+      "routes": [
+        {
+          "title": "compilationMode",
+          "path": "/reference/react-compiler/compilationMode"
+        },
+        {
+          "title": "gating",
+          "path": "/reference/react-compiler/gating"
+        },
+        {
+          "title": "logger",
+          "path": "/reference/react-compiler/logger"
+        },
+        {
+          "title": "panicThreshold",
+          "path": "/reference/react-compiler/panicThreshold"
+        },
+        {
+          "title": "target",
+          "path": "/reference/react-compiler/target"
+        }
+      ]
+    },
+    {
+      "title": "Directives",
+      "path": "/reference/react-compiler/directives",
+      "routes": [
+        {
+          "title": "\"use memo\"",
+          "path": "/reference/react-compiler/directives/use-memo"
+        },
+        {
+          "title": "\"use no memo\"",
+          "path": "/reference/react-compiler/directives/use-no-memo"
+        }
+      ]
+    },
+    {
+      "title": "Compiling Libraries",
+      "path": "/reference/react-compiler/compiling-libraries"
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "Rules of React"
diff --git a/yarn.lock b/yarn.lock
index a118cbeda..e5eecaac2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2443,6 +2443,14 @@ ccount@^2.0.0:
   resolved "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz"
   integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
 
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -2452,14 +2460,6 @@ chalk@^2.0.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 character-entities-html4@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz"
@@ -2799,11 +2799,6 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-date-fns@^2.16.1:
-  version "2.28.0"
-  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz"
-  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
-
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz"