diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 57b1432f3..4e7696152 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -24,6 +24,11 @@ September 10-11, 2026. In-person in Zurich, Switzerland
 
 [Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
 
+### React Conf Japan 2027 {/*react-conf-japan-2027*/}
+April 24, 2027. In-person in Tokyo, Japan
+
+[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+
 ## Past Conferences {/*past-conferences*/}
 
 ### CityJS New Delhi 2026 {/*cityjs-newdelhi-2026*/}
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 8f77af32b..29874498f 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -64,9 +64,32 @@ module.exports = {
 
 ### Vite {/*vite*/}
 
-Vite를 사용하는 경우 `vite-plugin-react`에 플러그인을 추가할 수 있습니다.
+버전 6.0.0 이상의 `@vitejs/plugin-react`와 함께 Vite를 사용하는 경우 `reactCompilerPreset`을 사용할 수 있습니다.
 
-```js {3,9}
+<TerminalBlock>
+npm install -D @rolldown/plugin-babel
+</TerminalBlock>
+
+```js {3-4,9-11}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({
+      presets: [reactCompilerPreset()]
+    }),
+  ],
+});
+```
+
+<Note>
+`@vitejs/plugin-react@6.0.0`에서 인라인 Babel 옵션이 제거되었습니다. 이전 버전을 사용하는 경우 다음과 같이 사용할 수 있습니다.
+
+```js
 // vite.config.js
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -81,26 +104,21 @@ export default defineConfig({
   ],
 });
 ```
+</Note>
 
-또는 Vite용 별도의 Babel 플러그인을 선호하는 경우
-
-<TerminalBlock>
-npm install -D vite-plugin-babel
-</TerminalBlock>
+또는 `@rolldown/plugin-babel`을 사용하여 Babel 플러그인을 직접 사용할 수도 있습니다.
 
-```js {2,11}
+```js {3,9}
 // vite.config.js
-import babel from 'vite-plugin-babel';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
 
 export default defineConfig({
   plugins: [
     react(),
     babel({
-      babelConfig: {
-        plugins: ['babel-plugin-react-compiler'],
-      },
+      plugins: ['babel-plugin-react-compiler'],
     }),
   ],
 });
diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index 88aa3e9a1..3b65ccf59 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -32,39 +32,256 @@ title: <Fragment> (<>...</>)
 
 - <CanaryBadge />  `ref`**(선택사항)**: ref 객체(예: [`useRef`](/reference/react/useRef)에서 반환된 것) 또는 [콜백 함수](/reference/react-dom/components/common#ref-callback)입니다. React는 `Fragment`로 감싼 DOM 노드와 상호작용하기 위한 메서드를 구현한 `FragmentInstance`를 ref 값으로 제공합니다.
 
-### <CanaryBadge /> FragmentInstance {/*fragmentinstance*/}
+#### 주의 사항 {/*caveats*/}
 
-`Fragment`에 `ref`를 전달하면, React는 `Fragment`로 감싼 DOM 노드와 상호작용하기 위한 메서드가 포함된 `FragmentInstance` 객체를 제공합니다.
+- Fragment에 `key`를 사용하려면 `<>...</>` 구문을 사용할 수 없습니다. 명시적으로 `react`에서 `Fragment`를 불러오고<sup>Import</sup> `<Fragment key={yourKey}>...</Fragment>`를 렌더링해야 합니다.
 
-**이벤트 처리 메서드**
-- `addEventListener(type, listener, options?)`: Fragment의 모든 최상위 DOM 자식에 이벤트 리스너를 추가합니다.
-- `removeEventListener(type, listener, options?)`: Fragment의 모든 최상위 DOM 자식에서 이벤트 리스너를 제거합니다.
-- `dispatchEvent(event)`: Fragment의 가상 자식에 이벤트를 디스패치하여 추가된 리스너를 호출하며, DOM 부모로 버블링될 수 있습니다.
+- React는 `<><Child /></>`에서 `[<Child />]`로 렌더링하거나 (또는 반대의 경우), 혹은 `<><Child /></>` 에서 `<Child />` 렌더링하거나 (또는 반대의 경우) [State를 초기화](/learn/preserving-and-resetting-state)하지 않습니다. 이는 오직 한 단계 깊이<sup>Single Level Deep</sup>까지만 적용됩니다. 예를 들어 `<><><Child /></></>` 에서 `<Child />`로 렌더링하는 것은 State가 초기화됩니다. 정확한 의미는 [여기](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)서 확인할 수 있습니다.
 
-**레이아웃 메서드**
-- `compareDocumentPosition(otherNode)`: Fragment의 문서 위치를 다른 노드와 비교합니다.
-  - Fragment에 자식이 있으면 네이티브 `compareDocumentPosition` 값이 반환됩니다.
-  - 빈 Fragment는 React 트리 내에서 위치를 비교하며 `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`을 포함합니다.
-  - 포탈이나 다른 삽입으로 인해 React 트리와 DOM 트리에서 다른 관계를 가진 엘리먼트는 `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`입니다.
-- `getClientRects()`: 모든 자식의 경계 사각형을 나타내는 `DOMRect` 객체의 평탄화된 배열을 반환합니다.
-- `getRootNode()`: Fragment의 부모 DOM 노드를 포함하는 루트 노드를 반환합니다.
+- <CanaryBadge /> Fragment에 `ref`를 전달하려면 `<>...</>` 문법을 사용할 수 없습니다. 명시적으로 `'react'`에서 `Fragment`를 불러오고 `<Fragment ref={yourRef}>...</Fragment>`를 렌더링해야 합니다.
 
-**포커스 관리 메서드**
-- `focus(options?)`: Fragment 내의 첫 번째 포커스 가능한 DOM 노드에 포커스합니다. 중첩된 자식에 대해 깊이 우선으로 포커스를 시도합니다.
-- `focusLast(options?)`: Fragment 내의 마지막 포커스 가능한 DOM 노드에 포커스합니다. 중첩된 자식에 대해 깊이 우선으로 포커스를 시도합니다.
-- `blur()`: `document.activeElement`가 Fragment 내에 있으면 포커스를 제거합니다.
+---
 
-**옵저버 메서드**
-- `observeUsing(observer)`: IntersectionObserver 또는 ResizeObserver로 Fragment의 DOM 자식을 관찰하기 시작합니다.
-- `unobserveUsing(observer)`: 지정된 옵저버로 Fragment의 DOM 자식 관찰을 중지합니다.
+### <CanaryBadge /> `FragmentInstance` {/*fragmentinstance*/}
 
-#### 주의 사항 {/*caveats*/}
+When you pass a `ref` to a Fragment, React provides a `FragmentInstance` object. It implements methods for interacting with the first-level DOM children wrapped by the Fragment.
 
-- Fragment에 `key`를 사용하려면 `<>...</>` 구문을 사용할 수 없습니다. 명시적으로 `react`에서 `Fragment`를 불러오고<sup>Import</sup> `<Fragment key={yourKey}>...</Fragment>`를 렌더링해야 합니다.
+* [`addEventListener`](#addeventlistener) and [`removeEventListener`](#removeeventlistener) manage event listeners across all first-level DOM children.
+* [`dispatchEvent`](#dispatchevent) dispatches an event on the Fragment, which can bubble to the DOM parent.
+* [`focus`](#focus), [`focusLast`](#focuslast), and [`blur`](#blur) manage focus across all nested children depth-first.
+* [`observeUsing`](#observeusing) and [`unobserveUsing`](#unobserveusing) attach and detach `IntersectionObserver` or `ResizeObserver` instances.
+* [`getClientRects`](#getclientrects) returns bounding rectangles of all first-level DOM children.
+* [`getRootNode`](#getrootnode) returns the root node of the Fragment's parent.
+* [`compareDocumentPosition`](#comparedocumentposition) compares the Fragment's position with another node.
+* [`scrollIntoView`](#scrollintoview) scrolls the Fragment's children into view.
 
-- React는 `<><Child /></>`에서 `[<Child />]`로 렌더링하거나 (또는 반대의 경우), 혹은 `<><Child /></>` 에서 `<Child />` 렌더링하거나 (또는 반대의 경우) [State를 초기화](/learn/preserving-and-resetting-state)하지 않습니다. 이는 오직 한 단계 깊이<sup>Single Level Deep</sup>까지만 적용됩니다. 예를 들어 `<><><Child /></></>` 에서 `<Child />`로 렌더링하는 것은 State가 초기화됩니다. 정확한 의미는 [여기](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)서 확인할 수 있습니다.
+---
 
-- <CanaryBadge /> Fragment에 `ref`를 전달하려면 `<>...</>` 문법을 사용할 수 없습니다. 명시적으로 `'react'`에서 `Fragment`를 불러오고 `<Fragment ref={yourRef}>...</Fragment>`를 렌더링해야 합니다.
+#### `addEventListener(type, listener, options?)` {/*addeventlistener*/}
+
+Adds an event listener to all first-level DOM children of the Fragment.
+
+```js
+fragmentRef.current.addEventListener('click', handleClick);
+```
+
+##### Parameters {/*addeventlistener-parameters*/}
+
+* `type`: A string representing the event type to listen for (e.g. `'click'`, `'focus'`).
+* `listener`: The event handler function.
+* **optional** `options`: An options object or boolean for capture, matching the [DOM `addEventListener` API.](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+
+##### Returns {/*addeventlistener-returns*/}
+
+`addEventListener` does not return anything (`undefined`).
+
+---
+
+#### `removeEventListener(type, listener, options?)` {/*removeeventlistener*/}
+
+Removes an event listener from all first-level DOM children of the Fragment.
+
+```js
+fragmentRef.current.removeEventListener('click', handleClick);
+```
+
+##### Parameters {/*removeeventlistener-parameters*/}
+
+* `type`: The event type string.
+* `listener`: The event handler function to remove.
+* **optional** `options`: An options object or boolean, matching the [DOM `removeEventListener` API.](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
+
+##### Returns {/*removeeventlistener-returns*/}
+
+`removeEventListener` does not return anything (`undefined`).
+
+---
+
+#### `dispatchEvent(event)` {/*dispatchevent*/}
+
+Dispatches an event on the Fragment. Added event listeners are called, and the event can bubble to the Fragment's DOM parent.
+
+```js
+fragmentRef.current.dispatchEvent(new Event('custom', { bubbles: true }));
+```
+
+##### Parameters {/*dispatchevent-parameters*/}
+
+* `event`: An [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) object to dispatch. If `bubbles` is `true`, the event bubbles to the Fragment's parent DOM node.
+
+##### Returns {/*dispatchevent-returns*/}
+
+`true` if the event was not cancelled, `false` if `preventDefault()` was called.
+
+---
+
+#### `focus(options?)` {/*focus*/}
+
+Focuses the first focusable DOM node in the Fragment. Unlike calling `element.focus()` on a DOM element, this method searches *all* nested children depth-first until it finds a focusable element—not just the element itself or its direct children.
+
+```js
+fragmentRef.current.focus();
+```
+
+##### Parameters {/*focus-parameters*/}
+
+* **optional** `options`: A [`FocusOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) object (e.g. `{ preventScroll: true }`).
+
+##### Returns {/*focus-returns*/}
+
+`focus` does not return anything (`undefined`).
+
+---
+
+#### `focusLast(options?)` {/*focuslast*/}
+
+Focuses the last focusable DOM node in the Fragment. Searches nested children depth-first, then iterates in reverse.
+
+```js
+fragmentRef.current.focusLast();
+```
+
+##### Parameters {/*focuslast-parameters*/}
+
+* **optional** `options`: A [`FocusOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) object.
+
+##### Returns {/*focuslast-returns*/}
+
+`focusLast` does not return anything (`undefined`).
+
+---
+
+#### `blur()` {/*blur*/}
+
+Removes focus from the active element if it is within the Fragment. If `document.activeElement` is not within the Fragment, `blur` does nothing.
+
+```js
+fragmentRef.current.blur();
+```
+
+##### Returns {/*blur-returns*/}
+
+`blur` does not return anything (`undefined`).
+
+---
+
+#### `observeUsing(observer)` {/*observeusing*/}
+
+Starts observing all first-level DOM children of the Fragment with the provided observer.
+
+```js
+const observer = new IntersectionObserver(callback, options);
+fragmentRef.current.observeUsing(observer);
+```
+
+##### Parameters {/*observeusing-parameters*/}
+
+* `observer`: An [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) or [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) instance.
+
+##### Returns {/*observeusing-returns*/}
+
+`observeUsing` does not return anything (`undefined`).
+
+---
+
+#### `unobserveUsing(observer)` {/*unobserveusing*/}
+
+Stops observing the Fragment's DOM children with the specified observer.
+
+```js
+fragmentRef.current.unobserveUsing(observer);
+```
+
+##### Parameters {/*unobserveusing-parameters*/}
+
+* `observer`: The same `IntersectionObserver` or `ResizeObserver` instance previously passed to [`observeUsing`](#observeusing).
+
+##### Returns {/*unobserveusing-returns*/}
+
+`unobserveUsing` does not return anything (`undefined`).
+
+---
+
+#### `getClientRects()` {/*getclientrects*/}
+
+Returns a flat array of [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) objects representing the bounding rectangles of all first-level DOM children.
+
+```js
+const rects = fragmentRef.current.getClientRects();
+```
+
+##### Returns {/*getclientrects-returns*/}
+
+An `Array<DOMRect>` containing the bounding rectangles of all children.
+
+---
+
+#### `getRootNode(options?)` {/*getrootnode*/}
+
+Returns the root node containing the Fragment's parent DOM node, matching the behavior of [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode).
+
+```js
+const root = fragmentRef.current.getRootNode();
+```
+
+##### Parameters {/*getrootnode-parameters*/}
+
+* **optional** `options`: An object with a `composed` boolean property, matching the [DOM `getRootNode` API.](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode#options)
+
+##### Returns {/*getrootnode-returns*/}
+
+A `Document`, `ShadowRoot`, or the `FragmentInstance` itself if there is no parent DOM node.
+
+---
+
+#### `compareDocumentPosition(otherNode)` {/*comparedocumentposition*/}
+
+Compares the document position of the Fragment with another node, returning a bitmask matching the behavior of [`Node.compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+
+```js
+const position = fragmentRef.current.compareDocumentPosition(otherElement);
+```
+
+##### Parameters {/*comparedocumentposition-parameters*/}
+
+* `otherNode`: The DOM node to compare against.
+
+##### Returns {/*comparedocumentposition-returns*/}
+
+A bitmask of [position flags](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition#return_value). Empty Fragments and Fragments with children rendered through a [portal](/reference/react-dom/createPortal) include `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` in the result.
+
+---
+
+#### `scrollIntoView(alignToTop?)` {/*scrollintoview*/}
+
+Scrolls the Fragment's children into view. When `alignToTop` is `true` or omitted, scrolls to align the first child with the top of the scrollable ancestor. When `alignToTop` is `false`, scrolls to align the last child with the bottom.
+
+```js
+fragmentRef.current.scrollIntoView();
+```
+
+##### Parameters {/*scrollintoview-parameters*/}
+
+* **optional** `alignToTop`: A boolean. If `true` (the default), scrolls the first child to the top of the scrollable area. If `false`, scrolls the last child to the bottom. Unlike [`Element.scrollIntoView()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView), this method does not accept a `ScrollIntoViewOptions` object.
+
+##### Returns {/*scrollintoview-returns*/}
+
+`scrollIntoView` does not return anything (`undefined`).
+
+##### Caveats {/*scrollintoview-caveats*/}
+
+* `scrollIntoView` does not accept an options object. Passing one throws an error. Use the `alignToTop` boolean instead.
+* When the Fragment has no children, `scrollIntoView` scrolls the nearest sibling or parent into view as a fallback.
+
+---
+
+#### `FragmentInstance` Caveats {/*fragmentinstance-caveats*/}
+
+* Methods that target children (such as `addEventListener`, `observeUsing`, and `getClientRects`) operate on *first-level host (DOM) children* of the Fragment. They do not directly target children nested inside another DOM element.
+* `focus` and `focusLast` search nested children depth-first for focusable elements, unlike event and observer methods which only target first-level host children.
+* `observeUsing` does not work on text nodes. React logs a warning in development if the Fragment contains only text children.
+* React does not apply event listeners added via `addEventListener` to hidden [`<Activity>`](/reference/react/Activity) trees. When an `Activity` boundary switches from hidden to visible, listeners are applied automatically.
+* Each first-level DOM child of a Fragment with a `ref` gets a `reactFragments` property—a `Set<FragmentInstance>` containing all Fragment instances that own the element. This enables [caching a shared observer](#caching-global-intersection-observer) across multiple Fragments.
 
 ---
 
@@ -242,47 +459,312 @@ function PostBody({ body }) {
 
 ---
 
-### <CanaryBadge /> Fragment ref를 사용한 DOM 상호작용 {/*using-fragment-refs-for-dom-interaction*/}
+### <CanaryBadge /> Adding event listeners without a wrapper element {/*adding-event-listeners-without-wrapper*/}
 
-Fragment ref를 사용하면 래퍼 엘리먼트를 추가하지 않고도 Fragment로 감싼 DOM 노드와 상호작용할 수 있습니다. 이벤트 처리, 가시성 추적, 포커스 관리, 그리고 `ReactDOM.findDOMNode()`와 같이 더 이상 사용되지 않는 패턴을 대체하는 데 유용합니다.
+Fragment `ref`s let you add event listeners to a group of elements without adding a wrapper DOM node. Use a [ref callback](/reference/react-dom/components/common#ref-callback) to attach and clean up listeners:
+
+<Sandpack>
 
 ```js
-import { Fragment } from 'react';
+import { Fragment, useState, useRef, useEffect } from 'react';
 
 function ClickableFragment({ children, onClick }) {
+  const fragmentRef = useRef(null);
+  useEffect(() => {
+    const fragmentInstance = fragmentRef.current;
+    if (fragmentInstance === null) {
+      return;
+    }
+    fragmentInstance.addEventListener('click', onClick);
+    return () => {
+      fragmentInstance.removeEventListener(
+        'click',
+        onClick
+      );
+    };
+  }, [onClick])
   return (
-    <Fragment ref={fragmentInstance => {
-      fragmentInstance.addEventListener('click', handleClick);
-      return () => fragmentInstance.removeEventListener('click', handleClick);
-    }}>
+    <Fragment ref={fragmentRef}>
       {children}
     </Fragment>
   );
 }
+
+export default function App() {
+  const [clicks, setClicks] = useState(0);
+
+  return (
+    <>
+      <p>Total clicks: {clicks}</p>
+      <ClickableFragment onClick={() => {
+        setClicks(c => c + 1);
+      }}>
+        <button>Button A</button>
+        <button>Button B</button>
+        <button>Button C</button>
+      </ClickableFragment>
+    </>
+  );
+}
 ```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
+
+The `addEventListener` call applies the listener to every first-level DOM child of the Fragment. When children are dynamically added or removed, the `FragmentInstance` automatically adds or removes the listener.
+
+<DeepDive>
+
+#### Which children does a Fragment ref target? {/*which-children-does-a-fragment-ref-target*/}
+
+A `FragmentInstance` targets the **first-level host (DOM) children** of the Fragment. Consider this tree:
+
+```js
+<Fragment ref={ref}>
+  <div id="A" />
+  <Wrapper>
+    <div id="B">
+      <div id="C" />
+    </div>
+  </Wrapper>
+  <div id="D" />
+</Fragment>
+```
+
+`Wrapper` is a React component, so the `FragmentInstance` looks through it to find DOM nodes. The targeted children are `A`, `B`, and `D`. `C` is not targeted because it is nested inside the DOM element `B`.
+
+Methods like `addEventListener`, `observeUsing`, and `getClientRects` operate on these first-level DOM children. `focus` and `focusLast` are different—they search *all* nested children depth-first to find focusable elements.
+
+</DeepDive>
+
+---
+
+### <CanaryBadge /> Managing focus across a group of elements {/*managing-focus-across-elements*/}
+
+Fragment `ref`s provide `focus`, `focusLast`, and `blur` methods that operate across all DOM nodes within the Fragment:
+
+<Sandpack>
+
+```js
+import { Fragment, useRef } from 'react';
+
+function FormFields({ children }) {
+  const fragmentRef = useRef(null);
+
+  return (
+    <>
+      <div className="buttons">
+        <button onClick={() => {
+          fragmentRef.current.focus();
+        }}>
+          Focus first
+        </button>
+        <button onClick={() => {
+          fragmentRef.current.focusLast();
+        }}>
+          Focus last
+        </button>
+        <button onClick={() => {
+          fragmentRef.current.blur();
+        }}>
+          Blur
+        </button>
+      </div>
+      <Fragment ref={fragmentRef}>
+        {children}
+      </Fragment>
+    </>
+  );
+}
+
+// Even though the inputs are deeply nested,
+// focus() searches depth-first to find them.
+export default function App() {
+  return (
+    <FormFields>
+      <fieldset>
+        <legend>Shipping</legend>
+        <label>
+          Street: <input name="street" />
+        </label>
+        <label>
+          City: <input name="city" />
+        </label>
+      </fieldset>
+    </FormFields>
+  );
+}
+```
+
+```css
+.buttons {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
+
+Calling `focus()` focuses the `street` input—even though it is nested inside a `<fieldset>` and `<label>`. `focus()` searches depth-first through all nested children, not just direct children of the Fragment. `focusLast()` does the same in reverse, and `blur()` removes focus if the currently focused element is within the Fragment.
+
+---
+
+### <CanaryBadge /> Scrolling a group of elements into view {/*scrolling-group-into-view*/}
+
+Use `scrollIntoView` to scroll a Fragment's children into view without a wrapper element. Pass `true` (or omit the argument) to scroll the first child to the top. Pass `false` to scroll the last child to the bottom:
+
+<Sandpack>
+
+```js
+import { Fragment, useRef } from 'react';
+
+function ScrollableSection({ children }) {
+  const fragmentRef = useRef(null);
+
+  return (
+    <>
+      <div className="buttons">
+        <button onClick={() => {
+          fragmentRef.current.scrollIntoView();
+        }}>
+          Scroll to top
+        </button>
+        <button onClick={() => {
+          fragmentRef.current.scrollIntoView(false);
+        }}>
+          Scroll to bottom
+        </button>
+      </div>
+      <div className="container">
+        <Fragment ref={fragmentRef}>
+          {children}
+        </Fragment>
+      </div>
+    </>
+  );
+}
+
+const items = [];
+for (let i = 1; i <= 25; i++) {
+  items.push('Item ' + i);
+}
+
+export default function App() {
+  return (
+    <ScrollableSection>
+      <h3>Section Start</h3>
+      {items.map((item) => (
+        <p key={item}>{item}</p>
+      ))}
+      <h3>Section End</h3>
+    </ScrollableSection>
+  );
+}
+```
+
+```css
+.buttons {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.container {
+  height: 200px;
+  overflow-y: auto;
+  border: 2px solid #c4c4c4;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+h3 {
+  margin: 4px 0;
+  /* Padding to handle offset of global sticky nav when scrolling for example */
+  padding-top: 4em;
+  color: #1a73e8;
+}
+
+p {
+  margin: 4px 0;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
+
 ---
 
-### <CanaryBadge /> Fragment ref로 가시성 추적하기 {/*tracking-visibility-with-fragment-refs*/}
+### <CanaryBadge /> Observing visibility without a wrapper element {/*observing-visibility-without-wrapper*/}
 
-Fragment ref는 가시성 추적과 교차 관찰에 유용합니다. 자식 컴포넌트가 ref를 노출하지 않아도 콘텐츠가 화면에 보이는 시점을 모니터링할 수 있습니다.
+Use `observeUsing` to attach an `IntersectionObserver` to all first-level DOM children of a Fragment. This lets you track visibility without requiring child components to expose `ref`s or adding a wrapper element:
 
-```js {19,21,31-34}
-import { Fragment, useRef, useLayoutEffect } from 'react';
+<Sandpack>
 
-function VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, children }) {
+```js
+import {
+  Fragment,
+  useRef,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import Card from './Card';
+
+function VisibleGroup({ onVisibilityChange, children }) {
   const fragmentRef = useRef(null);
 
   useLayoutEffect(() => {
+    const visibleElements = new Set();
     const observer = new IntersectionObserver(
       (entries) => {
-        onVisibilityChange(entries.some(entry => entry.isIntersecting))
-      },
-      { threshold }
+        entries.forEach(e => {
+          if (e.isIntersecting) {
+            visibleElements.add(e.target);
+          } else {
+            visibleElements.delete(e.target);
+          }
+        });
+        onVisibilityChange(visibleElements.size > 0);
+      }
     );
-
-    fragmentRef.current.observeUsing(observer);
-    return () => fragmentRef.current.unobserveUsing(observer);
-  }, [threshold, onVisibilityChange]);
+    const fragmentInstance = fragmentRef.current;
+    fragmentInstance.observeUsing(observer);
+    return () => {
+      fragmentInstance.unobserveUsing(observer);
+    };
+  }, [onVisibilityChange]);
 
   return (
     <Fragment ref={fragmentRef}>
@@ -291,38 +773,258 @@ function VisibilityObserverFragment({ threshold = 0.5, onVisibilityChange, child
   );
 }
 
-function MyComponent() {
-  const handleVisibilityChange = (isVisible) => {
-    console.log('Component is', isVisible ? 'visible' : 'hidden');
-  };
+export default function App() {
+  const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <VisibilityObserverFragment onVisibilityChange={handleVisibilityChange}>
-      <SomeThirdPartyComponent />
-      <AnotherComponent />
-    </VisibilityObserverFragment>
+    <div className={isVisible ? 'page visible' : 'page'}>
+      <div className="filler">Scroll down</div>
+      <VisibleGroup onVisibilityChange={setIsVisible}>
+        <Card title="First section" />
+        <Card title="Second section" />
+      </VisibleGroup>
+      <div className="filler">Scroll up</div>
+    </div>
   );
 }
 ```
 
-이 패턴은 Effect 기반 가시성 로깅의 대안이며, Effect 기반 방식은 대부분의 경우 안티패턴입니다. Effect에만 의존하면 렌더링된 컴포넌트가 사용자에게 실제로 보이는지 보장할 수 없습니다.
+```css
+.page {
+  transition: background 0.3s;
+}
+
+.page.visible {
+  background: #d4edda;
+}
+
+.filler {
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  font-size: 14px;
+}
+
+.card {
+  padding: 16px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin: 8px 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  font-weight: 600;
+  font-size: 14px;
+}
+```
+
+```js src/Card.js hidden
+export default function Card({ title }) {
+  return <div className="card">{title}</div>;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
 
 ---
 
-### <CanaryBadge /> Fragment ref로 포커스 관리하기 {/*focus-management-with-fragment-refs*/}
+### <CanaryBadge /> Caching a global IntersectionObserver {/*caching-global-intersection-observer*/}
 
-Fragment ref는 Fragment 내의 모든 DOM 노드에서 동작하는 포커스 관리 메서드를 제공합니다.
+A common performance optimization for sites with many observers is to share a single IntersectionObserver per config and route its entries to the correct callbacks based on which element intersected. Fragment `ref`s support this same pattern through the `reactFragments` property.
 
-```js
-import { Fragment, useRef } from 'react';
+Each first-level DOM child of a Fragment with a `ref` has a `reactFragments` property: a `Set` of `FragmentInstance` objects that contain that element. When the shared observer fires, you can use this property to look up which `FragmentInstance` owns the intersecting element and run the right callbacks.
+
+<Sandpack>
+
+```js src/App.js active
+import { useState, useCallback } from 'react';
+import ObservedGroup from './ObservedGroup';
+import Card from './Card';
+
+export default function App() {
+  const [bgColor, setBgColor] = useState(null);
+
+  const onGreen = useCallback((entry) => {
+    if (entry.isIntersecting) {
+      setBgColor('#d4edda');
+    }
+  }, []);
+
+  const onBlue = useCallback((entry) => {
+    if (entry.isIntersecting) {
+      setBgColor('#cce5ff');
+    }
+  }, []);
 
-function FocusFragment({ children }) {
   return (
-    <Fragment ref={(fragmentInstance) => fragmentInstance?.focus()}>
+    <div className="page" style={{
+      background: bgColor || 'white',
+    }}>
+      <div className="filler">Scroll down</div>
+      <ObservedGroup onIntersection={onGreen}>
+        <Card title="Green section" className="green" />
+      </ObservedGroup>
+      <div className="filler" />
+      <ObservedGroup onIntersection={onBlue}>
+        <Card title="Blue section" className="blue" />
+      </ObservedGroup>
+      <div className="filler">Scroll up</div>
+    </div>
+  );
+}
+```
+
+```js src/ObservedGroup.js
+import {
+  Fragment,
+  useRef,
+  useLayoutEffect,
+} from 'react';
+
+const callbackMap = new WeakMap();
+const observerCache = new Map();
+
+function getOptionsKey(options) {
+  const root = options?.root ?? null;
+  const rootMargin = options?.rootMargin ?? '0px';
+  const threshold = options?.threshold ?? 0;
+  return `${rootMargin}|${threshold}`;
+}
+
+function getSharedObserver(
+  fragmentInstance,
+  onIntersection,
+  options,
+) {
+  // Register this callback for the
+  // fragment instance.
+  const existing =
+    callbackMap.get(fragmentInstance);
+  callbackMap.set(
+    fragmentInstance,
+    existing
+      ? [...existing, onIntersection]
+      : [onIntersection],
+  );
+
+  const key = getOptionsKey(options);
+  if (observerCache.has(key)) {
+    return observerCache.get(key);
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        // Look up which FragmentInstances own
+        // this element.
+        const fragmentInstances =
+          entry.target.reactFragments;
+        if (fragmentInstances) {
+          for (const inst of fragmentInstances) {
+            const callbacks =
+              callbackMap.get(inst) || [];
+            callbacks.forEach(cb => cb(entry));
+          }
+        }
+      }
+    },
+    options,
+  );
+
+  observerCache.set(key, observer);
+  return observer;
+}
+
+export default function ObservedGroup({
+  onIntersection,
+  options,
+  children,
+}) {
+  const fragmentRef = useRef(null);
+
+  useLayoutEffect(() => {
+    const fragmentInstance = fragmentRef.current;
+    const observer = getSharedObserver(
+      fragmentInstance,
+      onIntersection,
+      options,
+    );
+    fragmentInstance.observeUsing(observer);
+    return () => {
+      fragmentInstance.unobserveUsing(observer);
+      callbackMap.delete(fragmentInstance);
+    };
+  }, [onIntersection, options]);
+
+  return (
+    <Fragment ref={fragmentRef}>
       {children}
     </Fragment>
   );
 }
 ```
 
-`focus()` 메서드는 Fragment 내의 첫 번째 포커스 가능한 엘리먼트에 포커스하고, `focusLast()`는 마지막 포커스 가능한 엘리먼트에 포커스합니다.
+```css
+.page {
+  transition: background 0.3s;
+}
+
+.filler {
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  font-size: 14px;
+}
+
+.card {
+  padding: 16px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin: 0 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.card.green {
+  border-left: 3px solid #28a745;
+}
+
+.card.blue {
+  border-left: 3px solid #007bff;
+}
+```
+
+```js src/Card.js hidden
+export default function Card({ title, className }) {
+  return <div className={'card' + (className ? ' ' + className : '')}>{title}</div>;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "latest"
+  }
+}
+```
+
+</Sandpack>
+
+Multiple `ObservedGroup` components with the same options reuse a single `IntersectionObserver`. When either section scrolls into view, the shared observer fires and uses `reactFragments` to route the entry to the correct callback.
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index e54a2b9bd..9e896d543 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -49,13 +49,240 @@ function MyComponent({name, todos}) {
 
 ---
 
+### `set` functions, like `setOptimistic(optimisticState)` {/*setoptimistic*/}
+
+The `set` function returned by `useOptimistic` lets you update the state for the duration of an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). You can pass the next state directly, or a function that calculates it from the previous state:
+
+```js
+const [optimisticLike, setOptimisticLike] = useOptimistic(false);
+const [optimisticSubs, setOptimisticSubs] = useOptimistic(subs);
+
+function handleClick() {
+  startTransition(async () => {
+    setOptimisticLike(true);
+    setOptimisticSubs(a => a + 1);
+    await saveChanges();
+  });
+}
+```
+
+#### Parameters {/*setoptimistic-parameters*/}
+
+* `optimisticState`: The value that you want the optimistic state to be during an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you provided a `reducer` to `useOptimistic`, this value will be passed as the second argument to your reducer. It can be a value of any type.
+    * If you pass a function as `optimisticState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next optimistic state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying the queued updaters to the previous state similar to [`useState` updaters](/reference/react/useState#setstate-parameters).
+
+#### Returns {/*setoptimistic-returns*/}
+
+`set` functions do not have a return value.
+
+#### Caveats {/*setoptimistic-caveats*/}
+
+* The `set` function must be called inside an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you call the setter outside an Action, [React will show a warning](#an-optimistic-state-update-occurred-outside-a-transition-or-action) and the optimistic state will briefly render.
+
+<DeepDive>
+
+#### How optimistic state works {/*how-optimistic-state-works*/}
+
+`useOptimistic` lets you show a temporary value while an Action is in progress:
+
+```js
+const [value, setValue] = useState('a');
+const [optimistic, setOptimistic] = useOptimistic(value);
+
+startTransition(async () => {
+  setOptimistic('b');
+  const newValue = await saveChanges('b');
+  setValue(newValue);
+});
+```
+
+When the setter is called inside an Action, `useOptimistic` will trigger a re-render to show that state while the Action is in progress. Otherwise, the `value` passed to `useOptimistic` is returned.
+
+This state is called the "optimistic" because it is used to immediately present the user with the result of performing an Action, even though the Action actually takes time to complete.
+
+**How the update flows**
+
+1. **Update immediately**: When `setOptimistic('b')` is called, React immediately renders with `'b'`.
+
+2. **(Optional) await in Action**: If you await in the Action, React continues showing `'b'`.
+
+3. **Transition scheduled**: `setValue(newValue)` schedules an update to the real state.
+
+4. **(Optional) wait for Suspense**: If `newValue` suspends, React continues showing `'b'`.
+
+5. **Single render commit**: Finally, the `newValue` commits for `value` and `optimistic`.
+
+There's no extra render to "clear" the optimistic state. The optimistic and real state converge in the same render when the Transition completes.
+
+<Note>
+
+#### Optimistic state is temporary {/*optimistic-state-is-temporary*/}
+
+Optimistic state only renders while an Action is in progress, otherwise `value` is rendered.
+
+If `saveChanges` returned `'c'`, then both `value` and `optimistic` will be `'c'`, not `'b'`.
+
+</Note>
+
+**How the final state is determined**
+
+The `value` argument to `useOptimistic` determines what displays after the Action finishes. How this works depends on the pattern you use:
+
+- **Hardcoded values** like `useOptimistic(false)`: After the Action, `state` is still `false`, so the UI shows `false`. This is useful for pending states where you always start from `false`.
+
+- **Props or state passed in** like `useOptimistic(isLiked)`: If the parent updates `isLiked` during the Action, the new value is used after the Action completes. This is how the UI reflects the result of the Action.
+
+- **Reducer pattern** like `useOptimistic(items, fn)`: If `items` changes while the Action is pending, React re-runs your `reducer` with the new `items` to recalculate the state. This keeps your optimistic additions on top of the latest data.
+
+**What happens when the Action fails**
+
+If the Action throws an error, the Transition still ends, and React renders with whatever `value` currently is. Since the parent typically only updates `value` on success, a failure means `value` hasn't changed, so the UI shows what it showed before the optimistic update. You can catch the error to show a message to the user.
+
+</DeepDive>
+
+---
+
 ## 사용법 {/*usage*/}
 
-### 폼을 낙관적으로 업데이트하기 {/*optimistically-updating-with-forms*/}
+### Adding optimistic state to a component {/*adding-optimistic-state-to-a-component*/}
+
+Call `useOptimistic` at the top level of your component to declare one or more optimistic states.
+
+```js [[1, 4, "age"], [1, 5, "name"], [1, 6, "todos"], [2, 4, "optimisticAge"], [2, 5, "optimisticName"], [2, 6, "optimisticTodos"], [3, 4, "setOptimisticAge"], [3, 5, "setOptimisticName"], [3, 6, "setOptimisticTodos"], [4, 6, "reducer"]]
+import { useOptimistic } from 'react';
+
+function MyComponent({age, name, todos}) {
+  const [optimisticAge, setOptimisticAge] = useOptimistic(age);
+  const [optimisticName, setOptimisticName] = useOptimistic(name);
+  const [optimisticTodos, setOptimisticTodos] = useOptimistic(todos, reducer);
+  // ...
+```
+
+`useOptimistic` returns an array with exactly two items:
+
+1. The <CodeStep step={2}>optimistic state</CodeStep>, initially set to the <CodeStep step={1}>value</CodeStep> provided.
+2. The <CodeStep step={3}>set function</CodeStep> that lets you temporarily change the state during an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions).
+   * If a <CodeStep step={4}>reducer</CodeStep> is provided, it will run before returning the optimistic state.
+
+To use the <CodeStep step={2}>optimistic state</CodeStep>, call the `set` function inside an Action.
+
+Actions are functions called inside `startTransition`:
+
+```js {3}
+function onAgeChange(e) {
+  startTransition(async () => {
+    setOptimisticAge(42);
+    const newAge = await postAge(42);
+    setAge(newAge);
+  });
+}
+```
+
+React will render the optimistic state `42` first while the `age` remains the current age. The Action waits for POST, and then renders the `newAge` for both `age` and `optimisticAge`.
+
+See [How optimistic state works](#how-optimistic-state-works) for a deep dive.
+
+<Note>
+
+When using [Action props](/reference/react/useTransition#exposing-action-props-from-components), you can call the set function without `startTransition`:
+
+```js [[3, 2, "setOptimisticName"]]
+async function submitAction() {
+  setOptimisticName('Taylor');
+  await updateName('Taylor');
+}
+```
+
+This works because Action props are already called inside `startTransition`.
+
+For an example, see: [Using optimistic state in Action props](#using-optimistic-state-in-action-props).
+
+</Note>
+
+---
+
+### Using optimistic state in Action props {/*using-optimistic-state-in-action-props*/}
+
+In an [Action prop](/reference/react/useTransition#exposing-action-props-from-components), you can call the optimistic setter directly without `startTransition`.
+
+This example sets optimistic state inside a `<form>` `submitAction` prop:
+
+<Sandpack>
+
+```js src/App.js
+import { useState, startTransition } from 'react';
+import EditName from './EditName';
+
+export default function App() {
+  const [name, setName] = useState('Alice');
+
+  return <EditName name={name} action={setName} />;
+}
+```
+
+```js src/EditName.js active
+import { useOptimistic, startTransition } from 'react';
+import { updateName } from './actions.js';
+
+export default function EditName({ name, action }) {
+  const [optimisticName, setOptimisticName] = useOptimistic(name);
+
+  async function submitAction(formData) {
+    const newName = formData.get('name');
+    setOptimisticName(newName);
+
+    const updatedName = await updateName(newName);
+    startTransition(() => {
+      action(updatedName);
+    })
+  }
+
+  return (
+    <form action={submitAction}>
+      <p>Your name is: {optimisticName}</p>
+      <p>
+        <label>Change it: </label>
+        <input
+          type="text"
+          name="name"
+          disabled={name !== optimisticName}
+        />
+      </p>
+    </form>
+  );
+}
+```
+
+```js src/actions.js hidden
+export async function updateName(name) {
+  await new Promise((res) => setTimeout(res, 1000));
+  return name;
+}
+```
+
+</Sandpack>
+
+In this example, when the user submits the form, the `optimisticName` updates immediately to show the `newName` optimistically while the server request is in progress. When the request completes, `name` and `optimisticName` are rendered with the actual `updatedName` from the response.
+
+<DeepDive>
+
+#### Why doesn't this need `startTransition`? {/*why-doesnt-this-need-starttransition*/}
+
+By convention, props called inside `startTransition` are named with "Action".
+
+Since `submitAction` is named with "Action", you know it's already called inside `startTransition`.
+
+See [Exposing `action` prop from components](/reference/react/useTransition#exposing-action-props-from-components) for the Action prop pattern.
+
+</DeepDive>
+
+---
+
+### Adding optimistic state to Action props {/*adding-optimistic-state-to-action-props*/}
 
-`useOptimistic` Hook은 네트워크 요청과 같은 백그라운드 작업이 완료되기 전에 사용자 인터페이스를 낙관적으로 업데이트하는 방법을 제공합니다. 폼의 맥락에서, 이 기술은 앱이 더 반응적으로 느껴지도록 도와줍니다. 사용자가 폼을 제출할 때, 서버의 응답을 기다리는 대신 인터페이스는 기대하는 결과로 즉시 업데이트됩니다.
+When creating an [Action prop](/reference/react/useTransition#exposing-action-props-from-components), you can add `useOptimistic` to show immediate feedback.
 
-예를 들어, 사용자가 폼에 메시지를 입력하고 "전송" 버튼을 누르면, `useOptimistic` Hook은 메시지가 실제로 서버로 전송되기 전에 "전송 중..." 라벨이 있는 목록에 메시지가 즉시 나타나도록 합니다. 이 "낙관적" 접근법은 속도와 반응성의 느낌을 줍니다. 그런 다음 폼은 백그라운드에서 메시지를 실제로 전송하려고 시도합니다. 서버가 메시지를 받았음을 확인하면, "전송 중..." 라벨이 제거됩니다.
+Here's a button that shows "Submitting..." while the `action` is pending:
 
 <Sandpack>