diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md index d4757b9ec9e..7a876061e52 100644 --- a/src/content/reference/dev-tools/react-performance-tracks.md +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -155,5 +155,5 @@ If you await a Promise, React will display duration of that Promise. To see all Different colors are used to indicate the duration of the component render. The darker the color, the longer the duration. -The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display addititional "Parallel" tracks. +The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display additional "Parallel" tracks. If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md index a5a77e5f6e8..56810c35909 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md @@ -79,7 +79,7 @@ function Component({user}) { } ``` -If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`: +If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`: ```js // ✅ Good: Synchronization in useEffect diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index c42f2fabfc5..2262af40296 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -419,7 +419,7 @@ const container = document.getElementById("root"); const root = createRoot(container, { // Keep in mind to remove these options in development to leverage // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // The handlers are only specified unconditionally here for demonstration purposes. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 251818bc992..cb7371994b6 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -449,7 +449,7 @@ const container = document.getElementById("root"); hydrateRoot(container, , { // Keep in mind to remove these options in development to leverage // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // The handlers are only specified unconditionally here for demonstration purposes. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md index 6fe53337d44..b0019868d8a 100644 --- a/src/content/reference/react-dom/flushSync.md +++ b/src/content/reference/react-dom/flushSync.md @@ -196,7 +196,7 @@ useEffect(() => { }, []); ``` -This will allow the current render to finish and schedule another syncronous render to flush the updates. +This will allow the current render to finish and schedule another synchronous render to flush the updates. diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md index 012d3823f90..2aa2dca3779 100644 --- a/src/content/reference/react-dom/server/resume.md +++ b/src/content/reference/react-dom/server/resume.md @@ -176,7 +176,7 @@ async function main(frame) { // Layer 2 // Just waiting here for demonstration purposes. // In a real app, the prelude and postponed state would've been serialized in Layer 1 and Layer would deserialize them. - // The prelude content could be flushed immediated as plain HTML while + // The prelude content could be flushed immediately as plain HTML while // React is continuing to render from where the prerender left off. await sleep(2000); diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 16e8d9e6065..d1edaa225e9 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -1226,7 +1226,7 @@ li { -Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again: +Now on initial mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again: ``` ... diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index bea4b627da8..5e0d3f7ce2c 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -130,7 +130,7 @@ const uppercasePassword = password.toUpperCase() // `uppercasePassword` is not t In this example, the constant `password` is tainted. Then `password` is used to create a new value `uppercasePassword` by calling the `toUpperCase` method on `password`. The newly created `uppercasePassword` is not tainted. -Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values. +Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untainted values. Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 581eebc634b..65fb483d454 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -1200,7 +1200,7 @@ There are two ways to handle errors with `useActionState`. For known errors, such as "quantity not available" validation errors from your backend, you can return it as part of your `reducerAction` state and display it in the UI. -For unknown errors, such as `undefined is not a function`, you can throw an error. React will cancel all queued Actions and shows the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) by rethrowing the error from the `useActionState` hook. +For unknown errors, such as `undefined is not a function`, you can throw an error. React will cancel all queued Actions and show the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) by rethrowing the error from the `useActionState` hook. @@ -1216,7 +1216,7 @@ function Checkout() { const result = await addToCart(prevState.count, quantity); if (result.error) { // Return the error from the API as state - return {...prevState, error: `Could not add quanitiy ${quantity}: ${result.error}`}; + return {...prevState, error: `Could not add quantity ${quantity}: ${result.error}`}; } if (!isPending) { diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index 022277df40f..c6fdd806023 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -1366,7 +1366,7 @@ You might have a provider without a `value` in the tree: If you forget to specify `value`, it's like passing `value={undefined}`. -You may have also mistakingly used a different prop name by mistake: +You may have also used a different prop name by mistake: ```js {1,2} // 🚩 Doesn't work: prop should be called "value" diff --git a/src/content/versions.md b/src/content/versions.md index 1b883a11a54..20e3dff580a 100644 --- a/src/content/versions.md +++ b/src/content/versions.md @@ -280,7 +280,7 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev). - [The Road to 1.0](https://legacy.reactjs.org/blog/2014/03/28/the-road-to-1.0.html) - [React v0.11.1](https://legacy.reactjs.org/blog/2014/07/25/react-v0.11.1.html) - [React v0.11.2](https://legacy.reactjs.org/blog/2014/09/16/react-v0.11.2.html) -- [Introducing the JSX Specificaion](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html) +- [Introducing the JSX Specification](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html) **Releases** - [v0.11.2 (September 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0112-september-16-2014)