From 55b9e04da0c685661e84fd269ff6c4e31b83b679 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 7 Nov 2023 07:09:49 +0900 Subject: [PATCH 01/11] Remove "canary: true" from `useTransition` in Sidebar (#6411) --- src/sidebarReference.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 5a6556557..315ea3e0b 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -82,8 +82,7 @@ }, { "title": "useTransition", - "path": "/reference/react/useTransition", - "canary": true + "path": "/reference/react/useTransition" } ] }, From 617065b8be84ee44114a6dd01af0a040c0f33fd9 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 7 Nov 2023 07:11:40 +0900 Subject: [PATCH 02/11] Fix style in React Reference Overview (#6410) --- src/content/reference/react/index.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 452f326d2..43394acf6 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -3,28 +3,32 @@ title: React Reference Overview --- -This section provides detailed reference documentation for working with React. -For an introduction to React, please visit the [Learn](/learn) section. + +This section provides detailed reference documentation for working with React. For an introduction to React, please visit the [Learn](/learn) section. + -Our The React reference documentation is broken down into functional subsections: +Our The React reference documentation is broken down into functional subsections: ## React {/*react*/} -Programmatic React features: + +Programmatic React features: + * [Hooks](/reference/react/hooks) - Use different React features from your components. * [Components](/reference/react/components) - Documents built-in components that you can use in your JSX. -* [APIs](/reference/react/apis) - APIs that are useful for defining components. +* [APIs](/reference/react/apis) - APIs that are useful for defining components. * [Directives](/reference/react/directives) - Provide instructions to bundlers compatible with React Server Components. ## React DOM {/*react-dom*/} -React-dom contains features that are only supported for web applications -(which run in the browser DOM environment). This section is broken into the following: + +React-dom contains features that are only supported for web applications (which run in the browser DOM environment). This section is broken into the following: * [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment. * [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components. * [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications. -* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser). +* [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. ## Legacy APIs {/*legacy-apis*/} -* [Legacy APIs](/reference/react/legacy) - Exported from the react package, but not recommended for use in newly written code. \ No newline at end of file + +* [Legacy APIs](/reference/react/legacy) - Exported from the `react` package, but not recommended for use in newly written code. From 8727204b04f050d1b7c065a9157fc3531552f018 Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Tue, 7 Nov 2023 00:22:48 +0100 Subject: [PATCH 03/11] fix Illustration and IllustrationBlock alt color on dark mode (#5981) --- src/components/MDX/MDXComponents.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 8344f9770..74ab788ba 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -243,7 +243,7 @@ function Illustration({ src={src} alt={alt} style={{maxHeight: 300}} - className="bg-white rounded-lg" + className="rounded-lg" /> {caption ? (
@@ -275,7 +275,12 @@ function IllustrationBlock({ const images = imageInfos.map((info, index) => (
- {info.alt} + {info.alt}
{info.caption ? (
From 42ca996138ba45775d0ba93128b3f2998d0828bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= Date: Tue, 7 Nov 2023 19:56:44 +0800 Subject: [PATCH 04/11] Captailize Server Action (#6417) Summary of changes: "Server Action", like "Effect", is a React-specific notion that would be benefited from captailization to be distinguished from its genertic meaning. It seems like [Next doc](https://nextjs.org/docs/app/api-reference/functions/server-actions) has also adopted such connventions and we should probably do the same. Co-authored-by: xuan.huang --- .../reference/react-dom/components/form.md | 6 +-- .../reference/react-dom/hooks/useFormState.md | 6 +-- src/content/reference/react/use-client.md | 4 +- src/content/reference/react/use-server.md | 48 +++++++++---------- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index dfffc74f5..25d1ba4e9 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -93,11 +93,11 @@ export default function Search() { ### Handle form submission with a Server Action {/*handle-form-submission-with-a-server-action*/} -Render a `
` with an input and submit button. Pass a server action (a function marked with [`'use server'`](/reference/react/use-server)) to the `action` prop of form to run the function when the form is submitted. +Render a `` with an input and submit button. Pass a Server Action (a function marked with [`'use server'`](/reference/react/use-server)) to the `action` prop of form to run the function when the form is submitted. -Passing a server action to `` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop. +Passing a Server Action to `` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop. -You can use hidden form fields to provide data to the ``'s action. The server action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). +You can use hidden form fields to provide data to the ``'s action. The Server Action will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). ```jsx import { updateCart } from './lib.js'; diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md index 53c73ae38..b2808079c 100644 --- a/src/content/reference/react-dom/hooks/useFormState.md +++ b/src/content/reference/react-dom/hooks/useFormState.md @@ -51,7 +51,7 @@ function StatefulForm({}) { The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass. -If used with a server action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed. +If used with a Server Action, `useFormState` allows the server's response from submitting the form to be shown even before hydration has completed. [See more examples below.](#usage) @@ -117,7 +117,7 @@ function action(currentState, formData) { #### Display form errors {/*display-form-errors*/} -To display messages such as an error message or toast that's returned by a server action, wrap the action in a call to `useFormState`. +To display messages such as an error message or toast that's returned by a Server Action, wrap the action in a call to `useFormState`. @@ -190,7 +190,7 @@ form button { #### Display structured information after submitting a form {/*display-structured-information-after-submitting-a-form*/} -The return value from a server action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information. +The return value from a Server Action can be any serializable value. For example, it could be an object that includes a boolean indicating whether the action was successful, an error message, or updated information. diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index f4b90d288..be8bd0089 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -269,7 +269,7 @@ Serializable props include: * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties -* Functions that are [server actions](/reference/react/use-server) +* Functions that are [Server Actions](/reference/react/use-server) * Client or Server Component elements (JSX) * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) @@ -376,4 +376,4 @@ These libraries may rely on component Hooks or client APIs. Third-party componen If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it. -[TODO]: <> (Troubleshooting - need use-cases) \ No newline at end of file +[TODO]: <> (Troubleshooting - need use-cases) diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 69f5e1044..938efa903 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -25,7 +25,7 @@ canary: true ### `'use server'` {/*use-server*/} -Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _server actions_. +Add `'use server'` at the top of an async function body to mark the function as callable by the client. We call these functions _Server Actions_. ```js {2} async function addToCart(data) { @@ -34,28 +34,28 @@ async function addToCart(data) { } ``` -When calling a server action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the server action returns a value, that value will be serialized and returned to the client. +When calling a Server Action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Action returns a value, that value will be serialized and returned to the client. -Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as server actions that can be used anywhere, including imported in client code. +Instead of individually marking functions with `'use server'`, you can add the directive to the top of a file to mark all exports within that file as Server Actions that can be used anywhere, including imported in client code. #### Caveats {/*caveats*/} * `'use server'` must be at the very beginning of their function or module; above any other code including imports (comments above directives are OK). They must be written with single or double quotes, not backticks. -* `'use server'` can only be used in server-side files. The resulting server actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values). -* To import a server action from [client code](/reference/react/use-client), the directive must be used on a module level. +* `'use server'` can only be used in server-side files. The resulting Server Actions can be passed to Client Components through props. See supported [types for serialization](#serializable-parameters-and-return-values). +* To import a Server Action from [client code](/reference/react/use-client), the directive must be used on a module level. * Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions. -* Always treat arguments to server actions as untrusted input and authorize any mutations. See [security considerations](#security). -* Server actions should be called in a [transition](/reference/react/useTransition). Server actions passed to [``](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition. -* Server actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing server actions typically process one action at a time and do not have a way to cache the return value. +* Always treat arguments to Server Actions as untrusted input and authorize any mutations. See [security considerations](#security). +* Server Actions should be called in a [transition](/reference/react/useTransition). Server Actions passed to [``](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition. +* Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value. ### Security considerations {/*security*/} -Arguments to server actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate. +Arguments to Server Actions are fully client-controlled. For security, always treat them as untrusted input, and make sure to validate and escape arguments as appropriate. -In any server action, make sure to validate that the logged-in user is allowed to perform that action. +In any Server Action, make sure to validate that the logged-in user is allowed to perform that action. -To prevent sending sensitive data from a server action, there are experimental taint APIs to prevent unique values and objects from being passed to client code. +To prevent sending sensitive data from a Server Action, there are experimental taint APIs to prevent unique values and objects from being passed to client code. See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueValue) and [experimental_taintObjectReference](/reference/react/experimental_taintObjectReference). @@ -63,9 +63,9 @@ See [experimental_taintUniqueValue](/reference/react/experimental_taintUniqueVal ### Serializable arguments and return values {/*serializable-parameters-and-return-values*/} -As client code calls the server action over the network, any arguments passed will need to be serializable. +As client code calls the Server Action over the network, any arguments passed will need to be serializable. -Here are supported types for server action arguments: +Here are supported types for Server Action arguments: * Primitives * [string](https://developer.mozilla.org/en-US/docs/Glossary/String) @@ -84,12 +84,12 @@ Here are supported types for server action arguments: * [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) * [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instances * Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties -* Functions that are server actions +* Functions that are Server Actions * [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) Notably, these are not supported: * React elements, or [JSX](https://react.dev/learn/writing-markup-with-jsx) -* Functions, including component functions or any other function that is not a server action +* Functions, including component functions or any other function that is not a Server Action * [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) * Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) * Symbols not registered globally, ex. `Symbol('my new symbol')` @@ -100,9 +100,9 @@ Supported serializable return values are the same as [serializable props](/refer ## Usage {/*usage*/} -### Server actions in forms {/*server-actions-in-forms*/} +### Server Actions in forms {/*server-actions-in-forms*/} -The most common use case of server actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for server actions in [forms](/reference/react-dom/components/form). +The most common use case of Server Actions will be calling server functions that mutate data. On the browser, the [HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is the traditional approach for a user to submit a mutation. With React Server Components, React introduces first-class support for Server Actions in [forms](/reference/react-dom/components/form). Here is a form that allows a user to request a username. @@ -123,15 +123,15 @@ export default App() { } ``` -In this example `requestUsername` is a server action passed to a ``. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a server action in a form, React will supply the form's [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) as the first argument to the server action. +In this example `requestUsername` is a Server Action passed to a ``. When a user submits this form, there is a network request to the server function `requestUsername`. When calling a Server Action in a form, React will supply the form's [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) as the first argument to the Server Action. -By passing a server action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded. +By passing a Server Action to the form `action`, React can [progressively enhance](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement) the form. This means that forms can be submitted before the JavaScript bundle is loaded. #### Handling return values in forms {/*handling-return-values*/} In the username request form, there might be the chance that a username is not available. `requestUsername` should tell us if it fails or not. -To update the UI based on the result of a server action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState). +To update the UI based on the result of a Server Action while supporting progressive enhancement, use [`useFormState`](/reference/react-dom/hooks/useFormState). ```js // requestUsername.js @@ -171,11 +171,11 @@ function UsernameForm() { Note that like most Hooks, `useFormState` can only be called in [client code](/reference/react/use-client). -### Calling a server action outside of `` {/*calling-a-server-action-outside-of-form*/} +### Calling a Server Action outside of `` {/*calling-a-server-action-outside-of-form*/} -Server actions are exposed server endpoints and can be called anywhere in client code. +Server Actions are exposed server endpoints and can be called anywhere in client code. -When using a server action outside of a [form](/reference/react-dom/components/form), call the server action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap server actions in transitions. +When using a Server Action outside of a [form](/reference/react-dom/components/form), call the Server Action in a [transition](/reference/react/useTransition), which allows you to display a loading indicator, show [optimistic state updates](/reference/react/useOptimistic), and handle unexpected errors. Forms will automatically wrap Server Actions in transitions. ```js {9-12} import incrementLike from './actions'; @@ -212,4 +212,4 @@ export default async incrementLike() { } ``` -To read a server action return value, you'll need to `await` the promise returned. \ No newline at end of file +To read a Server Action return value, you'll need to `await` the promise returned. From 292e55de89ed813209c27a34291ea8e06bd306e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= Date: Tue, 7 Nov 2023 20:32:52 +0800 Subject: [PATCH 05/11] Capitalize Client/Server Component (#6418) Summary of changes: following Co-authored-by: xuan.huang --- .../06/15/react-labs-what-we-have-been-working-on-june-2022.md | 2 +- src/content/reference/react/use.md | 2 +- src/content/reference/react/useId.md | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index 938b75c4b..df864db10 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -28,7 +28,7 @@ We’re working together with Vercel and Shopify to unify bundler support for sh ## Asset Loading {/*asset-loading*/} -Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, server components, and more. +Currently, assets like scripts, external styles, fonts, and images are typically preloaded and loaded using external systems. This can make it tricky to coordinate across new environments like streaming, Server Components, and more. We’re looking at adding APIs to preload and load deduplicated external assets through React APIs that work in all React environments. We’re also looking at having these support Suspense so you can have images, CSS, and fonts that block display until they’re loaded but don’t block streaming and concurrent rendering. This can help avoid [“popcorning“](https://twitter.com/sebmarkbage/status/1516852731251724293) as the visuals pop and layout shifts. diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 8e1a8f213..b726e67db 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -334,7 +334,7 @@ When passing a Promise from a Server Component to a Client Component, its resolv #### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/} -A Promise can be passed from a Server Component to a Client Component and resolved in the Client component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop. +A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the `use` Hook. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop. ```js export default function App() { diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md index 4ea029f27..96a5e25a2 100644 --- a/src/content/reference/react/useId.md +++ b/src/content/reference/react/useId.md @@ -179,7 +179,7 @@ You might be wondering why `useId` is better than incrementing a global variable The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML. -This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. +This is very difficult to guarantee with an incrementing counter because the order in which the Client Components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client. Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order. @@ -302,4 +302,3 @@ input { margin: 5px; } ``` - From c5a2e15d58eeaa8f4952edc2d00cedb158e4b037 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= Date: Tue, 7 Nov 2023 20:50:57 +0800 Subject: [PATCH 06/11] Capitalize Client in "client modules" (#6419) Summary of changes: See Co-authored-by: xuan.huang --- src/content/reference/react/use-client.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/use-client.md b/src/content/reference/react/use-client.md index be8bd0089..dedd2480a 100644 --- a/src/content/reference/react/use-client.md +++ b/src/content/reference/react/use-client.md @@ -51,14 +51,14 @@ As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be eval * When a `'use client'` module is imported from another client-rendered module, the directive has no effect. * When a component module contains a `'use client'` directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a `'use client'` directive. * A component usage is considered a Client Component if it is defined in module with `'use client'` directive or when it is a transitive dependency of a module that contains a `'use client'` directive. Otherwise, it is a Server Component. -* Code that is marked for client evaluation is not limited to components. All code that is a part of the client module sub-tree is sent to and run by the client. +* Code that is marked for client evaluation is not limited to components. All code that is a part of the Client module sub-tree is sent to and run by the client. * When a server evaluated module imports values from a `'use client'` module, the values must either be a React component or [supported serializable prop values](#passing-props-from-server-to-client-components) to be passed to a Client Component. Any other use case will throw an exception. ### How `'use client'` marks client code {/*how-use-client-marks-client-code*/} In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component). -For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of client modules. +For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of Client modules. To better illustrate this, consider the following React Server Components app. @@ -145,7 +145,7 @@ export default [ -In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as client modules. The subtree starting at `InspirationGenerator.js` is now marked as client modules. +In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as Client modules. The subtree starting at `InspirationGenerator.js` is now marked as Client modules. `'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered. @@ -237,7 +237,7 @@ With `'use client'`, you can determine when components are Client Components. As For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run. #### Advantages of Server Components {/*advantages*/} -* Server Components can reduce the amount of code sent and run by the client. Only client modules are bundled and evaluated by the client. +* Server Components can reduce the amount of code sent and run by the client. Only Client modules are bundled and evaluated by the client. * Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests. #### Limitations of Server Components {/*limitations*/} From 721479b34668cb1bdfe2e312a86c04f08cd5d659 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Tue, 7 Nov 2023 09:36:55 -0500 Subject: [PATCH 07/11] Check for value before passing to gtag (#6415) --- src/components/Layout/Feedback.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index 86fc91350..b36112c47 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -45,13 +45,14 @@ const thumbsDownIcon = ( ); function sendGAEvent(isPositive: boolean) { + const value = isPositive ? 1 : 0; // Fragile. Don't change unless you've tested the network payload // and verified that the right events actually show up in GA. // @ts-ignore gtag('event', 'feedback', { event_category: 'button', event_label: window.location.pathname, - value: isPositive ? 1 : 0, + value, }); } From eeb0979c3c41870530b08e7d46780655ccfc8580 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Wed, 8 Nov 2023 11:40:02 -0500 Subject: [PATCH 08/11] Update event label and value name (#6421) --- src/components/Layout/Feedback.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx index b36112c47..8639ce12c 100644 --- a/src/components/Layout/Feedback.tsx +++ b/src/components/Layout/Feedback.tsx @@ -45,14 +45,15 @@ const thumbsDownIcon = ( ); function sendGAEvent(isPositive: boolean) { + const category = isPositive ? 'like_button' : 'dislike_button'; const value = isPositive ? 1 : 0; // Fragile. Don't change unless you've tested the network payload // and verified that the right events actually show up in GA. // @ts-ignore gtag('event', 'feedback', { - event_category: 'button', + event_category: category, event_label: window.location.pathname, - value, + event_value: value, }); } From 49ebed1b5bc753b9584ea137943ab22985f3bfe3 Mon Sep 17 00:00:00 2001 From: Kathryn Middleton Date: Wed, 8 Nov 2023 13:08:58 -0500 Subject: [PATCH 09/11] Fix useOptimistic demo bug (#6422) --- src/content/reference/react/useOptimistic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index d0511b1a9..47593a0ae 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -116,7 +116,7 @@ export default function App() { ]); async function sendMessage(formData) { const sentMessage = await deliverMessage(formData.get("message")); - setMessages([...messages, { text: sentMessage }]); + setMessages((messages) => [...messages, { text: sentMessage }]); } return ; } From 44f442d5b201c633619c1c9a5fec784891c696ae Mon Sep 17 00:00:00 2001 From: Luna Date: Wed, 8 Nov 2023 19:55:40 -0400 Subject: [PATCH 10/11] Add space for canary title (#6416) Co-authored-by: Luna Wei --- src/components/Layout/Sidebar/SidebarLink.tsx | 2 +- src/components/PageHeading.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 180ded867..8a71d9e6e 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -77,7 +77,7 @@ export function SidebarLink({ {title}{' '} {canary && ( )} diff --git a/src/components/PageHeading.tsx b/src/components/PageHeading.tsx index 076a38be9..659295d0a 100644 --- a/src/components/PageHeading.tsx +++ b/src/components/PageHeading.tsx @@ -34,7 +34,7 @@ function PageHeading({ {title} {canary && ( )} From fcd00068bd1bdd4eb37e3e0ab0488a9d093670bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xuan=20Huang=20=28=E9=BB=84=E7=8E=84=29?= Date: Fri, 10 Nov 2023 21:57:45 +0800 Subject: [PATCH 11/11] Capitalize word "Hook" (#6424) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary of changes: See . There is one exception though. The error message “Rendered fewer hooks than expected” from React is indeed "hooks" so I kept as-is. Shall we change the error message from React? Co-authored-by: xuan.huang --- .../blog/2022/03/08/react-18-upgrade-guide.md | 4 ++-- src/content/blog/2022/03/29/react-v18.md | 11 +++++----- ...-what-we-have-been-working-on-june-2022.md | 2 +- ...what-we-have-been-working-on-march-2023.md | 2 +- src/content/learn/typescript.md | 20 +++++++++---------- src/content/reference/react/use-client.md | 2 +- 6 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md index 29ba0b71d..66da896ec 100644 --- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md +++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md @@ -224,8 +224,8 @@ For more information, see the [Automatic batching deep dive](https://github.com/ In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs: -* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86). -* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for `