メニュー
Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/reactjs/react.dev --skill docs-componentsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when writing or editing files in src/content/blog/. Provides blog post structure and conventions.
Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.
Use when adding interactive RSC (React Server Components) code examples to React docs using <SandpackRSC>, or when modifying the RSC sandpack infrastructure.
SKILL.md を表示中
SOC 職業分類に基づく
| name | docs-components |
| description | Comprehensive MDX component patterns (Note, Pitfall, DeepDive, Recipes, etc.) for all documentation types. Authoritative source for component usage, examples, and heading conventions. |
| Need | Component |
|---|---|
| Helpful tip or terminology | <Note> |
| Common mistake warning | <Pitfall> |
| Advanced technical explanation | <DeepDive> |
| Canary-only feature | <Canary> or <CanaryBadge /> |
| Server Components only | <RSC> |
| Deprecated API | <Deprecated> |
| Experimental/WIP | <Wip> |
| Visual diagram | <Diagram> |
| Multiple related examples | <Recipes> |
| Interactive code | <Sandpack> (see /docs-sandpack) |
| Console error display | <ConsoleBlock> |
| End-of-page exercises | <Challenges> (Learn pages only) |
| Component | Heading Level |
|---|---|
| DeepDive title |
#### (h4) |
| Titled Pitfall | ##### (h5) |
| Titled Note | #### (h4) |
| Recipe items | #### (h4) |
| Challenge items | #### (h4) |
Callout components (Note, Pitfall, DeepDive) require a blank line after the opening tag before content begins.
Never place consecutively:
<Pitfall> followed by <Pitfall> - Combine into one with titled subsections, or separate with prose<Note> followed by <Note> - Combine into one, or separate with proseAllowed consecutive patterns:
<DeepDive> followed by <DeepDive> - OK for multi-part explorations (see useMemo.md)<Pitfall> followed by <DeepDive> - OK when DeepDive explains "why" behind the PitfallSeparation content: Prose paragraphs, code examples (Sandpack), or section headers.
Why: Consecutive warnings create a "wall of cautions" that overwhelms readers and causes important warnings to be skimmed.
Incorrect:
<Pitfall>
Don't do X.
</Pitfall>
<Pitfall>
Don't do Y.
</Pitfall>
Correct - combined:
<Pitfall>
##### Don't do X {/*pitfall-x*/}
Explanation.
##### Don't do Y {/*pitfall-y*/}
Explanation.
</Pitfall>
Correct - separated:
<Pitfall>
Don't do X.
</Pitfall>
This leads to another common mistake:
<Pitfall>
Don't do Y.
</Pitfall>
<Note>Important clarifications, conventions, or tips. Less severe than Pitfall.
<Note>
The optimization of caching return values is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization).
</Note>
Use #### (h4) heading with an ID.
<Note>
#### There is no directive for Server Components. {/*no-directive*/}
A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is for Server Functions.
</Note>
<Note>
Starting in React 19, you can render `<SomeContext>` as a provider.
In older versions of React, use `<SomeContext.Provider>`.
</Note>
<Pitfall>Common mistakes that cause bugs. Use for errors readers will likely make.
<Pitfall>
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
</Pitfall>
Use ##### (h5) heading with an ID.
<Pitfall>
##### Calling different memoized functions will read from different caches. {/*pitfall-different-caches*/}
To access the same cache, components must call the same memoized function.
</Pitfall>
<Pitfall>
##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*pitfall-same-component*/}
```js
function Form() {
// 🔴 `pending` will never be true
const { pending } = useFormStatus();
return <form action={submit}></form>;
}
Instead call useFormStatus from inside a component located inside <form>.
<DeepDive>Optional deep technical content. First child must be #### heading with ID.
<DeepDive>
#### Is using an updater always preferred? {/*is-updater-preferred*/}
You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There's no harm in it, but it's also not always necessary.
In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click.
</DeepDive>
For comparing related concepts:
<DeepDive>
#### When should I use `cache`, `memo`, or `useMemo`? {/*cache-memo-usememo*/}
All mentioned APIs offer memoization but differ in what they memoize, who can access the cache, and when their cache is invalidated.
#### `useMemo` {/*deep-dive-usememo*/}
In general, you should use `useMemo` for caching expensive computations in Client Components across renders.
#### `cache` {/*deep-dive-cache*/}
In general, you should use `cache` in Server Components to memoize work that can be shared across components.
</DeepDive>
<Recipes>Multiple related examples showing variations. Each recipe needs <Solution />.
<Recipes titleText="Basic useState examples" titleId="examples-basic">
#### Counter (number) {/*counter-number*/}
In this example, the `count` state variable holds a number.
<Sandpack>
{/* code */}
</Sandpack>
<Solution />
#### Text field (string) {/*text-field-string*/}
In this example, the `text` state variable holds a string.
<Sandpack>
{/* code */}
</Sandpack>
<Solution />
</Recipes>
Common titleText/titleId combinations:
examples-basicexamples-[concept]examples-[topic]<Challenges>End-of-page exercises. Learn pages only. Each challenge needs problem + solution Sandpack.
<Challenges>
#### Fix the bug {/*fix-the-bug*/}
Problem description...
<Hint>
Optional hint text.
</Hint>
<Sandpack>
{/* problem code */}
</Sandpack>
<Solution>
Explanation...
<Sandpack>
{/* solution code */}
</Sandpack>
</Solution>
</Challenges>
Guidelines:
#### heading with ID<Deprecated>For deprecated APIs. Content should explain what to use instead.
<Deprecated>
In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
`forwardRef` will be deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop).
</Deprecated>
### `componentWillMount()` {/*componentwillmount*/}
<Deprecated>
This API has been renamed from `componentWillMount` to [`UNSAFE_componentWillMount`.](#unsafe_componentwillmount)
Run the [`rename-unsafe-lifecycles` codemod](codemod-link) to automatically update.
</Deprecated>
<RSC>For APIs that only work with React Server Components.
<RSC>
`cache` is only for use with [React Server Components](/reference/rsc/server-components).
</RSC>
<RSC>
Server Functions are for use in [React Server Components](/reference/rsc/server-components).
**Note:** Until September 2024, we referred to all Server Functions as "Server Actions".
</RSC>
<Canary> and <CanaryBadge />For features only available in Canary releases.
<Intro>
`<Fragment>` lets you group elements without a wrapper node.
<Canary>Fragments can also accept refs, enabling interaction with underlying DOM nodes.</Canary>
</Intro>
### <CanaryBadge /> FragmentInstance {/*fragmentinstance*/}
* <CanaryBadge /> **optional** `ref`: A ref object from `useRef` or callback function.
* <CanaryBadge /> If you want to pass `ref` to a Fragment, you can't use the `<>...</>` syntax.
<Diagram>Visual explanations of module dependencies, render trees, or data flow.
<Diagram name="use_client_module_dependency" height={250} width={545} alt="A tree graph with the top node representing the module 'App.js'. 'App.js' has three children...">
`'use client'` segments the module dependency tree, marking `InspirationGenerator.js` and all dependencies as client-rendered.
</Diagram>
Attributes:
name: Diagram identifier (used for image file)height: Height in pixelswidth: Width in pixelsalt: Accessible description of the diagram<CodeStep> (Use Sparingly)Numbered callouts in prose. Pairs with code block annotations.
In code blocks:
```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"]]
import { useState } from 'react';
function MyComponent() {
const [age, setAge] = useState(42);
}
Format: `[[step_number, line_number, "text_to_highlight"], ...]`
In prose:
```mdx
1. The <CodeStep step={1}>current state</CodeStep> initially set to the <CodeStep step={3}>initial value</CodeStep>.
2. The <CodeStep step={2}>`set` function</CodeStep> that lets you change it.
✅ Good use - highlighting key concepts:
React will compare the <CodeStep step={2}>dependencies</CodeStep> with the dependencies you passed...
🚫 Avoid - excessive highlighting:
When an <CodeStep step={1}>Activity</CodeStep> boundary is <CodeStep step={2}>hidden</CodeStep> during its <CodeStep step={3}>initial</CodeStep> render...
<ConsoleBlock>Display console output (errors, warnings, logs).
<ConsoleBlock level="error">
Uncaught Error: Too many re-renders.
</ConsoleBlock>
Levels: error, warning, info
For component placement rules specific to Reference pages, invoke /docs-writer-reference.
Key placement patterns:
<RSC> goes before <Intro> at top of page<Deprecated> goes after <Intro> for page-level deprecation<Deprecated> goes after method heading for method-level deprecation<Canary> wrapper goes inline within <Intro><CanaryBadge /> appears in headings, props lists, and caveatsFor Learn page structure and patterns, invoke /docs-writer-learn.
Key usage patterns:
For Blog page structure and patterns, invoke /docs-writer-blog.
Key usage patterns:
Version/Status: <Experimental>, <ExperimentalBadge />, <RSCBadge />, <NextMajor>, <Wip>
Visuals: <DiagramGroup>, <Illustration>, <IllustrationBlock>, <CodeDiagram>, <FullWidth>
Console: <ConsoleBlockMulti>, <ConsoleLogLine>
Specialized: <TerminalBlock>, <BlogCard>, <TeamMember>, <YouTubeIframe>, <ErrorDecoder />, <LearnMore>, <Math>, <MathI>, <LanguageList>
See existing docs for usage examples of these components.