From 53ad7cd0222e309e1980ee9c81edaf3d925c92d8 Mon Sep 17 00:00:00 2001 From: mohammedkarimcode <300674987+mohammedkarimcode@users.noreply.github.com> Date: Fri, 7 Aug 2026 00:10:21 +0300 Subject: [PATCH] Standardize em dash spacing --- src/components/MDX/MDXComponents.tsx | 4 ++-- .../blog/2022/03/08/react-18-upgrade-guide.md | 2 +- src/content/blog/2022/03/29/react-v18.md | 10 +++++----- ...t-labs-what-we-have-been-working-on-march-2023.md | 8 ++++---- ...abs-what-we-have-been-working-on-february-2024.md | 4 ++-- src/content/blog/2025/10/07/react-compiler-1.md | 2 +- src/content/blog/2025/10/16/react-conf-2025-recap.md | 12 ++++++------ src/content/blog/2026/02/24/the-react-foundation.md | 4 ++-- src/content/community/translations.md | 2 +- src/content/community/versioning-policy.md | 2 +- src/content/learn/react-compiler/introduction.md | 2 +- src/content/learn/rsc-sandbox-test.md | 8 ++++---- src/content/learn/understanding-your-ui-as-a-tree.md | 4 ++-- src/content/reference/react-dom/client/createRoot.md | 2 +- src/content/reference/react-dom/components/link.md | 2 +- src/content/reference/react-dom/components/script.md | 4 ++-- src/content/reference/react/Activity.md | 2 +- src/content/reference/react/index.md | 2 +- src/content/reference/react/use.md | 2 +- src/content/reference/rsc/use-client.md | 2 +- src/content/reference/rules/index.md | 2 +- src/content/warnings/invalid-hook-call-warning.md | 4 ++-- 22 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 5dc177a04cd..175f47a5235 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -486,8 +486,8 @@ function LanguageList({progress}: {progress: TranslationProgress}) {
  • {enName} ({name}) - {' '} - —{' '} + + — Contribute 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 50babfb1322..728bc20693e 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 @@ -99,7 +99,7 @@ root.render(); -There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. +There is no one-to-one replacement for the old render callback API—it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index b68ef4e8d39..91d57a75886 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -19,7 +19,7 @@ React 18 is now available on npm! In our last post, we shared step-by-step instr Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. -Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it's only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications. +Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in—it's only enabled when you use a concurrent feature—but we think it will have a big impact on the way people build applications. We've spent years researching and developing support for concurrency in React, and we've taken extra care to provide a gradual adoption path for existing users. Last summer, [we formed the React 18 Working Group](/blog/2021/06/08/the-plan-for-react-18) to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem. @@ -41,13 +41,13 @@ For React Native users, React 18 will ship in React Native with the New React Na The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers. -Concurrency is not a feature, per se. It's a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it's valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won't see those concepts anywhere in our public APIs. +Concurrency is not a feature, per se. It's a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail—it's valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won't see those concepts anywhere in our public APIs. When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on *what* you want the user experience to look like, and React handles *how* to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood. -However, Concurrent React is more important than a typical implementation detail — it's a foundational update to React's core rendering model. So while it's not super important to know how concurrency works, it may be worth knowing what it is at a high level. +However, Concurrent React is more important than a typical implementation detail—it's a foundational update to React's core rendering model. So while it's not super important to know how concurrency works, it may be worth knowing what it is at a high level. -A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen. +A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React—in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen. In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience. @@ -77,7 +77,7 @@ In React 18, you can start using [Suspense](/reference/react/Suspense) for data In the future, we may expose additional primitives that could make it easier to access your data with Suspense, perhaps without the use of an opinionated framework. However, Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem. -As in previous versions of React, you can also use Suspense for code splitting on the client with React.lazy. But our vision for Suspense has always been about much more than loading code — the goal is to extend support for Suspense so that eventually, the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc). +As in previous versions of React, you can also use Suspense for code splitting on the client with React.lazy. But our vision for Suspense has always been about much more than loading code—the goal is to extend support for Suspense so that eventually, the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc). ## Server Components is Still in Development {/*server-components-is-still-in-development*/} diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index df1fd085dd2..51e14854406 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -59,11 +59,11 @@ This is why we're adding built-in support for rendering ``, `<meta>`, and Since our previous update we've been actively iterating on the design of [React Forget](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#react-compiler), an optimizing compiler for React. We've previously talked about it as an "auto-memoizing compiler", and that is true in some sense. But building the compiler has helped us understand React's programming model even more deeply. A better way to understand React Forget is as an automatic *reactivity* compiler. -The core idea of React is that developers define their UI as a function of the current state. You work with plain JavaScript values — numbers, strings, arrays, objects — and use standard JavaScript idioms — if/else, for, etc — to describe your component logic. The mental model is that React will re-render whenever the application state changes. We believe this simple mental model and keeping close to JavaScript semantics is an important principle in React's programming model. +The core idea of React is that developers define their UI as a function of the current state. You work with plain JavaScript values—numbers, strings, arrays, objects—and use standard JavaScript idioms—if/else, for, etc—to describe your component logic. The mental model is that React will re-render whenever the application state changes. We believe this simple mental model and keeping close to JavaScript semantics is an important principle in React's programming model. The catch is that React can sometimes be *too* reactive: it can re-render too much. For example, in JavaScript we don't have cheap ways to compare if two objects or arrays are equivalent (having the same keys and values), so creating a new object or array on each render may cause React to do more work than it strictly needs to. This means developers have to explicitly memoize components so as to not over-react to changes. -Our goal with React Forget is to ensure that React apps have just the right amount of reactivity by default: that apps re-render only when state values *meaningfully* change. From an implementation perspective this means automatically memoizing, but we believe that the reactivity framing is a better way to understand React and Forget. One way to think about this is that React currently re-renders when object identity changes. With Forget, React re-renders when the semantic value changes — but without incurring the runtime cost of deep comparisons. +Our goal with React Forget is to ensure that React apps have just the right amount of reactivity by default: that apps re-render only when state values *meaningfully* change. From an implementation perspective this means automatically memoizing, but we believe that the reactivity framing is a better way to understand React and Forget. One way to think about this is that React currently re-renders when object identity changes. With Forget, React re-renders when the semantic value changes—but without incurring the runtime cost of deep comparisons. In terms of concrete progress, since our last update we have substantially iterated on the design of the compiler to align with this automatic reactivity approach and to incorporate feedback from using the compiler internally. After some significant refactors to the compiler starting late last year, we've now begun using the compiler in production in limited areas at Meta. We plan to open-source it once we've proved it in production. @@ -86,9 +86,9 @@ Offscreen rendering is an upcoming capability in React for rendering screens in Most React developers will not interact with React's offscreen APIs directly. Instead, offscreen rendering will be integrated into things like routers and UI libraries, and then developers who use those libraries will automatically benefit without additional work. -The idea is that you should be able to render any React tree offscreen without changing the way you write your components. When a component is rendered offscreen, it does not actually *mount* until the component becomes visible — its effects are not fired. For example, if a component uses `useEffect` to log analytics when it appears for the first time, prerendering won't mess up the accuracy of those analytics. Similarly, when a component goes offscreen, its effects are unmounted, too. A key feature of offscreen rendering is that you can toggle the visibility of a component without losing its state. +The idea is that you should be able to render any React tree offscreen without changing the way you write your components. When a component is rendered offscreen, it does not actually *mount* until the component becomes visible—its effects are not fired. For example, if a component uses `useEffect` to log analytics when it appears for the first time, prerendering won't mess up the accuracy of those analytics. Similarly, when a component goes offscreen, its effects are unmounted, too. A key feature of offscreen rendering is that you can toggle the visibility of a component without losing its state. -Since our last update, we've tested an experimental version of prerendering internally at Meta in our React Native apps on Android and iOS, with positive performance results. We've also improved how offscreen rendering works with Suspense — suspending inside an offscreen tree will not trigger Suspense fallbacks. Our remaining work involves finalizing the primitives that are exposed to library developers. We expect to publish an RFC later this year, alongside an experimental API for testing and feedback. +Since our last update, we've tested an experimental version of prerendering internally at Meta in our React Native apps on Android and iOS, with positive performance results. We've also improved how offscreen rendering works with Suspense—suspending inside an offscreen tree will not trigger Suspense fallbacks. Our remaining work involves finalizing the primitives that are exposed to library developers. We expect to publish an RFC later this year, alongside an experimental API for testing and feedback. ## Transition Tracing {/*transition-tracing*/} diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md index 002dae2a94c..44f5123f87c 100644 --- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md +++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md @@ -23,9 +23,9 @@ React Compiler is no longer a research project: the compiler now powers instagra As discussed in our [previous post](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler), React can *sometimes* re-render too much when state changes. Since the early days of React our solution for such cases has been manual memoization. In our current APIs, this means applying the [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`memo`](/reference/react/memo) APIs to manually tune how much React re-renders on state changes. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date. -Manual memoization is a reasonable compromise, but we weren’t satisfied. Our vision is for React to *automatically* re-render just the right parts of the UI when state changes, *without compromising on React’s core mental model*. We believe that React’s approach — UI as a simple function of state, with standard JavaScript values and idioms — is a key part of why React has been approachable for so many developers. That’s why we’ve invested in building an optimizing compiler for React. +Manual memoization is a reasonable compromise, but we weren’t satisfied. Our vision is for React to *automatically* re-render just the right parts of the UI when state changes, *without compromising on React’s core mental model*. We believe that React’s approach—UI as a simple function of state, with standard JavaScript values and idioms—is a key part of why React has been approachable for so many developers. That’s why we’ve invested in building an optimizing compiler for React. -JavaScript is a notoriously challenging language to optimize, thanks to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript *and* the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize. +JavaScript is a notoriously challenging language to optimize, thanks to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript *and* the “rules of React”. For example, React components must be idempotent—returning the same value given the same inputs—and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize. Of course, we understand that developers sometimes bend the rules a bit, and our goal is to make React Compiler work out of the box on as much code as possible. The compiler attempts to detect when code doesn’t strictly follow React’s rules and will either compile the code where safe or skip compilation if it isn’t safe. We’re testing against Meta’s large and varied codebase in order to help validate this approach. diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index ee5ffa4fd44..1bbd05ec6b9 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -139,7 +139,7 @@ To enable React Compiler rules, we recommend using the `recommended` preset. You - Preventing unsafe ref access during render with [`refs`](/reference/eslint-plugin-react-hooks/lints/refs). ## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written — and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return. +By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written—and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return. However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change. diff --git a/src/content/blog/2025/10/16/react-conf-2025-recap.md b/src/content/blog/2025/10/16/react-conf-2025-recap.md index 8476b02aad3..2612e4dd58a 100644 --- a/src/content/blog/2025/10/16/react-conf-2025-recap.md +++ b/src/content/blog/2025/10/16/react-conf-2025-recap.md @@ -31,15 +31,15 @@ _Watch the full day 1 stream [here.](https://www.youtube.com/watch?v=zyVRg2QR6LA In the day 1 keynote, Joe Savona shared the updates from the team and community since the last React Conf and highlights from React 19.0 and 19.1. Mofei Zhang highlighted the new features in React 19.2 including: -* [`<Activity />`](https://react.dev/reference/react/Activity) — a new component to manage visibility. +* [`<Activity />`](https://react.dev/reference/react/Activity)—a new component to manage visibility. * [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) to fire events from Effects. -* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks) — a new profiling tool in DevTools. +* [Performance Tracks](https://react.dev/reference/dev-tools/react-performance-tracks)—a new profiling tool in DevTools. * [Partial Pre-Rendering](https://react.dev/blog/2025/10/01/react-19-2#partial-pre-rendering) to pre-render part of an app ahead of time, and resume rendering it later. Jack Pope announced new features in Canary including: -* [`<ViewTransition />`](https://react.dev/reference/react/ViewTransition) — a new component to animate page transitions. -* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance) — a new way to interact with the DOM nodes wrapped by a Fragment. +* [`<ViewTransition />`](https://react.dev/reference/react/ViewTransition)—a new component to animate page transitions. +* [Fragment Refs](https://react.dev/reference/react/Fragment#fragmentinstance)—a new way to interact with the DOM nodes wrapped by a Fragment. Lauren Tan announced [React Compiler v1.0](https://react.dev/blog/2025/10/07/react-compiler-1) and recommended all apps use React Compiler for benefits like: * [Automatic memoization](/learn/react-compiler/introduction#what-does-react-compiler-do) that understands React code. @@ -80,7 +80,7 @@ Throughout the conference, there were talks from the React team including: * [Reimagining Lists in React Native](https://www.youtube.com/watch?v=p9OcztRyDl0&t=10382s) [(Luna Wei)](https://x.com/lunaleaps) introduced Virtual View, a new primitive for lists that manages visibility with mode-based rendering (hidden/pre-render/visible). * [Profiling with React Performance tracks](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=8276s) [(Ruslan Lesiutin)](https://x.com/ruslanlesiutin) showed how to use the new React Performance Tracks to debug performance issues and build great apps. * [React Strict DOM](https://www.youtube.com/watch?v=p9OcztRyDl0&t=9026s) [(Nicolas Gallagher)](https://nicolasgallagher.com/) talked about Meta's approach to using web code on native. -* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev) — Chance worked with the React team to showcase how to use `<Activity />` and `<ViewTransition />` to build fast, native-feeling animations. +* [View Transitions and Activity](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=4870s) [(Chance Strickland)](https://x.com/chancethedev)—Chance worked with the React team to showcase how to use `<Activity />` and `<ViewTransition />` to build fast, native-feeling animations. * [In case you missed the memo](https://www.youtube.com/watch?v=zyVRg2QR6LA&t=9525s) [(Cody Olsen)](https://bsky.app/profile/codey.bsky.social) - Cody worked with the React team to adopt the Compiler at Sanity Studio, and shared how it went. ## React framework talks {/*react-framework-talks*/} @@ -90,7 +90,7 @@ The second half of day 2 had a series of talks from React Framework teams includ * [React Everywhere: Bringing React Into Native Apps](https://www.youtube.com/watch?v=p9OcztRyDl0&t=18213s) by [Mike Grabowski](https://x.com/grabbou). * [How Parcel Bundles React Server Components](https://www.youtube.com/watch?v=p9OcztRyDl0&t=19538s) by [Devon Govett](https://x.com/devonovett). * [Designing Page Transitions](https://www.youtube.com/watch?v=p9OcztRyDl0&t=20640s) by [Delba de Oliveira](https://x.com/delba_oliveira). -* [Build Fast, Deploy Faster — Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) by [Evan Bacon](https://x.com/baconbrix). +* [Build Fast, Deploy Faster—Expo in 2025](https://www.youtube.com/watch?v=p9OcztRyDl0&t=21350s) by [Evan Bacon](https://x.com/baconbrix). * [The React Router's take on RSC](https://www.youtube.com/watch?v=p9OcztRyDl0&t=22367s) by [Kent C. Dodds](https://x.com/kentcdodds). * [RedwoodSDK: Web Standards Meet Full-Stack React](https://www.youtube.com/watch?v=p9OcztRyDl0&t=24992s) by [Peter Pistorius](https://x.com/appfactory) and [Aurora Scharff](https://x.com/aurorascharff). * [TanStack Start](https://www.youtube.com/watch?v=p9OcztRyDl0&t=26065s) by [Tanner Linsley](https://x.com/tannerlinsley). diff --git a/src/content/blog/2026/02/24/the-react-foundation.md b/src/content/blog/2026/02/24/the-react-foundation.md index 17b17b7b91e..1e907764047 100644 --- a/src/content/blog/2026/02/24/the-react-foundation.md +++ b/src/content/blog/2026/02/24/the-react-foundation.md @@ -30,7 +30,7 @@ The React Foundation has officially launched, hosted by the Linux Foundation. [In October](/blog/2025/10/07/introducing-the-react-foundation), we announced our intent to form the React Foundation. Today, we're excited to share that the React Foundation has officially launched. -React, React Native, and supporting projects like JSX are no longer owned by Meta — they are now owned by the React Foundation, an independent foundation hosted by the Linux Foundation. You can read more in the [Linux Foundation's press release](https://www.linuxfoundation.org/press/linux-foundation-announces-the-formation-of-the-react-foundation). +React, React Native, and supporting projects like JSX are no longer owned by Meta—they are now owned by the React Foundation, an independent foundation hosted by the Linux Foundation. You can read more in the [Linux Foundation's press release](https://www.linuxfoundation.org/press/linux-foundation-announces-the-formation-of-the-react-foundation). ### Founding Members {/*founding-members*/} @@ -49,7 +49,7 @@ The React Foundation has eight Platinum founding members: **Amazon**, **Callstac ### New Provisional Leadership Council {/*new-provisional-leadership-council*/} -React's technical governance will always be independent from the React Foundation board — React's technical direction will continue to be set by the people who contribute to and maintain React. We have formed a provisional leadership council to determine this structure. We will share an update in the coming months. +React's technical governance will always be independent from the React Foundation board—React's technical direction will continue to be set by the people who contribute to and maintain React. We have formed a provisional leadership council to determine this structure. We will share an update in the coming months. ### Next Steps {/*next-steps*/} diff --git a/src/content/community/translations.md b/src/content/community/translations.md index fd49bd3e97a..d866482f08a 100644 --- a/src/content/community/translations.md +++ b/src/content/community/translations.md @@ -12,7 +12,7 @@ React docs are translated by the global community into many languages all over t All translations are provided from the canonical source docs: -- [English](https://react.dev/) — [Contribute](https://github.com/reactjs/react.dev/) +- [English](https://react.dev/)—[Contribute](https://github.com/reactjs/react.dev/) ## Full translations {/*full-translations*/} diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index 2e3edb6170f..54aadf52b16 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -69,7 +69,7 @@ We have a pretty good track record for keeping React releases free of bugs, but For these reasons, we reserve patch releases only for the most critical bugs and security vulnerabilities. -If a release includes non-essential changes — such as internal refactors, changes to implementation details, performance improvements, or minor bugfixes — we will bump the minor version even when there are no new features. +If a release includes non-essential changes—such as internal refactors, changes to implementation details, performance improvements, or minor bugfixes—we will bump the minor version even when there are no new features. ## All release channels {/*all-release-channels*/} diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index ff5d6eae483..7286787870f 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -99,7 +99,7 @@ React Compiler's automatic memoization is primarily focused on **improving updat #### Optimizing Re-renders {/*optimizing-re-renders*/} -React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes: +React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_—unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `<MessageButton>` will re-render whenever `<FriendList>`'s state changes: ```javascript function FriendList({ friends }) { diff --git a/src/content/learn/rsc-sandbox-test.md b/src/content/learn/rsc-sandbox-test.md index f914ea4ae3f..36b14005485 100644 --- a/src/content/learn/rsc-sandbox-test.md +++ b/src/content/learn/rsc-sandbox-test.md @@ -90,7 +90,7 @@ export default async function Albums() { ## Streaming Proof {/*streaming-proof*/} -This demo proves streaming is incremental. The shell renders instantly with a `<Suspense>` fallback. After 2 seconds the async component streams in and replaces it — without re-rendering the outer content. The timestamps show the gap. +This demo proves streaming is incremental. The shell renders instantly with a `<Suspense>` fallback. After 2 seconds the async component streams in and replaces it—without re-rendering the outer content. The timestamps show the gap. <SandpackRSC> @@ -208,7 +208,7 @@ export default function DataViewer({ map, set, date, big }) { ## Promise Streaming with use() {/*promise-streaming-use*/} -The server creates a promise (resolves in 2s) and passes it as a prop through a parent async component that suspends for 3s. When the parent reveals at ~3s, the promise is already resolved — so `use()` returns instantly with no inner fallback. The elapsed time should be ~3000ms (the parent's delay), not ~5000ms (which would mean the promise restarted on the client). +The server creates a promise (resolves in 2s) and passes it as a prop through a parent async component that suspends for 3s. When the parent reveals at ~3s, the promise is already resolved—so `use()` returns instantly with no inner fallback. The elapsed time should be ~3000ms (the parent's delay), not ~5000ms (which would mean the promise restarted on the client). <SandpackRSC> @@ -390,7 +390,7 @@ export default function TestButton({ testTypes }) { ## Server Action Mutation + Re-render {/*action-mutation-rerender*/} -The server action mutates server-side data and returns a confirmation string. The updated list is only visible because the framework automatically re-renders the entire server component tree after the action completes — the server component re-reads the data and streams the new UI to the client. +The server action mutates server-side data and returns a confirmation string. The updated list is only visible because the framework automatically re-renders the entire server component tree after the action completes—the server component re-reads the data and streams the new UI to the client. <SandpackRSC> @@ -487,7 +487,7 @@ export default function AddTodo({ createTodo }) { ## Inline Server Actions {/*inline-server-actions*/} -Server actions defined inline inside a server component with `'use server'` on the function body. The action closes over module-level state and is passed as a prop — no separate `actions.js` file needed. +Server actions defined inline inside a server component with `'use server'` on the function body. The action closes over module-level state and is passed as a prop—no separate `actions.js` file needed. <SandpackRSC> diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index afc38cd332f..0196d38f97c 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -94,7 +94,7 @@ export default function Copyright({year}) { ```js src/quotes.js export default [ - "Don’t let yesterday take up too much of today.” — Will Rogers", + "Don’t let yesterday take up too much of today.”—Will Rogers", "Ambition is putting a ladder against the sky.", "A joy that's shared is a joy made double.", ]; @@ -214,7 +214,7 @@ export default function Copyright({year}) { ```js src/inspirations.js export default [ - {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, + {type: 'quote', value: "Don’t let yesterday take up too much of today.”—Will Rogers"}, {type: 'color', value: "#B73636"}, {type: 'quote', value: "Ambition is putting a ladder against the sky."}, {type: 'color', value: "#256266"}, diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index c42f2fabfc5..a9300d4918f 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -287,7 +287,7 @@ export function Comments() { function Comment({ text, author }) { return ( - <p>{text} — <i>{author}</i></p> + <p>{text}—<i>{author}</i></p> ); } ``` diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md index 6d374807cae..248d039c4f9 100644 --- a/src/content/reference/react-dom/components/link.md +++ b/src/content/reference/react-dom/components/link.md @@ -126,7 +126,7 @@ export default function BlogPage() { ### Linking to a stylesheet {/*linking-to-a-stylesheet*/} -If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence. +If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others—stylesheets with higher precedence can override those with lower precedence. <Note> When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `<link>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103). diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md index 06032a8935b..91c13a61270 100644 --- a/src/content/reference/react-dom/components/script.md +++ b/src/content/reference/react-dom/components/script.md @@ -40,11 +40,11 @@ It should have *either* `children` or a `src` prop. Other supported props: -* `async`: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance. +* `async`: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed—the preferred behavior for performance. * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. * `fetchPriority`: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be `"high"`, `"low"`, or `"auto"` (the default). * `integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity). -* `noModule`: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not. +* `noModule`: a boolean. Disables the script in browsers that support ES modules—allowing for a fallback script for browsers that do not. * `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy. * `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn. * `type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type). diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index b521970b764..76cccd7c1a6 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -477,7 +477,7 @@ But Activity boundaries can also be used to _prepare_ content that the user has </Activity> ``` -When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects. +When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page—but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects. This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times. diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index bdb202157f6..4fa9d0aac63 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -46,7 +46,7 @@ The [ESLint plugin for React Hooks](/reference/eslint-plugin-react-hooks) helps ## Rules of React {/*rules-of-react*/} -React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications: +React has idioms—or rules—for how to express patterns in a way that is easy to understand and yields high-quality applications: * [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly. * [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience. diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index a5187326530..667492ccba0 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -664,7 +664,7 @@ This cache pattern is the foundation for [re-fetching data](#re-fetching-data-in ##### Don't skip calling `use` based on whether a Promise is already settled. {/*conditional-use*/} -Unlike other hooks, `use` can be called inside conditions and loops — but it must always be called for the Promise itself. Never read `promise.status` or `promise.value` directly to bypass `use`; always pass the Promise to `use` and let React handle it. +Unlike other hooks, `use` can be called inside conditions and loops—but it must always be called for the Promise itself. Never read `promise.status` or `promise.value` directly to bypass `use`; always pass the Promise to `use` and let React handle it. ```js diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index 4c6051977ef..1165ecd5efe 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -121,7 +121,7 @@ export default function Copyright({year}) { ```js src/inspirations.js export default [ - "Don’t let yesterday take up too much of today.” — Will Rogers", + "Don’t let yesterday take up too much of today.”—Will Rogers", "Ambition is putting a ladder against the sky.", "A joy that's shared is a joy made double.", ]; diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index dd5f7456c84..7b6beb455b3 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -3,7 +3,7 @@ title: Rules of React --- <Intro> -Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications. +Just as different programming languages have their own ways of expressing concepts, React has its own idioms—or rules—for how to express patterns in a way that is easy to understand and yields high-quality applications. </Intro> <InlineToc /> diff --git a/src/content/warnings/invalid-hook-call-warning.md b/src/content/warnings/invalid-hook-call-warning.md index 31b930ee371..fa2069a9d72 100644 --- a/src/content/warnings/invalid-hook-call-warning.md +++ b/src/content/warnings/invalid-hook-call-warning.md @@ -145,7 +145,7 @@ console.log(window.React1 === window.React2); If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/react/react/issues/13991) includes some common reasons encountered by the community. -This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy. +This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts—one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy. <Note> @@ -155,4 +155,4 @@ In general, React supports using multiple independent copies on one page (for ex ## Other Causes {/*other-causes*/} -If none of this worked, please comment in [this issue](https://github.com/react/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it. +If none of this worked, please comment in [this issue](https://github.com/react/react/issues/13991) and we'll try to help. Try to create a small reproducing example—you might discover the problem as you're doing it.