Merge pull request #610 from reactjs/sync-65d297e9

Sync with react.dev @ 65d297e
Add translations for the 500 page 
Add versions and blog intro translations, add related changes

Author: alinkedd

TRANSLATION.md

@@ -180,11 +180,13 @@
 | package registry | реєстр пакетів |
 | paint | фарбування, перефарбування |
 | performance | продуктивність (TODO: розглянути "швидкодію") |
+| (blog) post | допис (у блозі) |
 | prop | проп |
 | props | пропси |
 | production | публічне середовище; впровадження |
 | production mode | (у режимі) публічного середовища; режим публічного впровадження |
 | reducer | редюсер |
+| release | реліз |
 | reuse | повторне використання, перевикористання |
 | React | React |
 | React element | React-елемент, елемент React |

public/fonts/Source-Code-Pro-Bold.woff2

@@ -864,7 +864,8 @@ function ExampleLayout({
           </div>
           <div
             ref={contentRef}
-            className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center">
+            className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"
+            dir="ltr">
             {right}
             <div
               className={cn(

public/fonts/Source-Code-Pro-Regular.woff2

@@ -203,8 +203,12 @@ function LearnMore({
 
 function ReadBlogPost({path}: {path: string}) {
   return (
-    <ButtonLink className="mt-1" label="Read Post" href={path} type="primary">
-      Переглянути публікацію
+    <ButtonLink
+      className="mt-1"
+      label="Читати допис"
+      href={path}
+      type="primary">
+      Переглянути допис
       <IconNavArrow displayDirection="end" className="inline ms-1" />
     </ButtonLink>
   );

public/images/blog/react-labs-april-2025/flip.gif

@@ -1,7 +1,7 @@
 export const template = {
   '/src/index.js': {
     hidden: true,
-    code: `import React, { StrictMode } from "react";
+    code: `import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles.css";
 

src/components/Layout/HomeContent.js

@@ -27,7 +27,6 @@ function PageHeading({
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
-  console.log('version', version);
   return (
     <div className="px-5 sm:px-12 pt-3.5">
       <div className="max-w-4xl ms-0 2xl:mx-auto">

src/components/MDX/MDXComponents.tsx

@@ -124,7 +124,14 @@ export const Seo = withRouter(
         )}
         <link
           rel="preload"
-          href="/fonts/Source-Code-Pro-Regular.woff2"
+          href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
           as="font"
           type="font/woff2"
           crossOrigin="anonymous"

src/components/MDX/Sandpack/template.ts

@@ -4,9 +4,9 @@ title: Блог React
 
 <Intro>
 
-This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
+Цей блог є офіційним джерелом оновлень від команди React. Все важливе, включно з нотатками релізу або повідомленнями про застарілі функції, буде опубліковано спершу тут.
 
-You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+Ви також можете слідкувати за [@react.dev](https://bsky.app/profile/react.dev) на платформі Bluesky або за [@reactjs](https://twitter.com/reactjs) у Twitter, але ви не пропустите нічого суттєвого, якщо читатимете лише цей блог.
 
 </Intro>
 
@@ -112,14 +112,14 @@ The React team is excited to share a few updates:
 
 ---
 
-### All release notes {/*all-release-notes*/}
+### Усі нотатки до релізів {/*all-release-notes*/}
 
-Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/facebook/react/releases) page.
+Не кожен реліз React заслуговує на окремий допис у блозі, проте ви можете знайти детальний список змін для кожного релізу у файлі [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) у репозиторії React, а також на сторінці ["Релізи"](https://github.com/facebook/react/releases).
 
 ---
 
-### Старіші публікації {/*older-posts*/}
+### Старіші дописи {/*older-posts*/}
 
-Перегляньте [старіші публікації.](https://reactjs.org/blog/all.html)
+Перегляньте [старіші дописи.](https://reactjs.org/blog/all.html)
 
 <div className="h-12"></div>

src/components/PageHeading.tsx

@@ -29,4 +29,4 @@ Each community consists of many thousands of React users.
 
 ## News {/*news*/}
 
-For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog/) on this website.
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.

src/components/Seo.tsx

@@ -38,7 +38,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## Canada {/*canada*/}
 * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
 * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)

src/content/blog/index.md

@@ -1,5 +1,5 @@
 ---
-title: Versioning Policy
+title: Політика версіонування
 ---
 
 <Intro>

src/content/community/index.md

@@ -116,7 +116,7 @@ Rsbuild відразу підтримує такі функції React, як ш
 Розділення коду за маршрутом, інтегроване з бандлером й отриманням даних, може зменшити час початкового завантаження вашого застосунку та рендерингу найбільшого видимого вмісту застосунку ([малювання найбільшого вмісту, LCP](https://web.dev/articles/lcp)).
 
 Для інструкцій з розділення коду перегляньте документацію вашого інструменту збирання:
-- [Оптимізації збирання у Vite](https://v3.vitejs.dev/guide/features.html#build-optimizations)
+- [Оптимізації збирання у Vite](https://vite.dev/guide/features.html#build-optimizations)
 - [Розділення коду в Parcel](https://parceljs.org/features/code-splitting/)
 - [Розділення коду в Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting)
 

src/content/community/meetups.md

@@ -2011,7 +2011,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}
@@ -2110,7 +2110,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}

src/content/community/versioning-policy.md

@@ -1241,7 +1241,7 @@ export default function Timer() {
 
 </Sandpack>
 
-Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, so you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
+Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
 
 </Solution>
 

src/content/learn/build-a-react-app-from-scratch.md

@@ -820,7 +820,7 @@ export default function ChatRoom({ roomId }) {
   // ...
 ```
 
-and pass it as an input to another Hook:
+and passing it as an input to another Hook:
 
 ```js {6}
 export default function ChatRoom({ roomId }) {
@@ -2081,7 +2081,6 @@ Write `useInterval` in the `useInterval.js` file and import it into the `useCoun
 <Sandpack>
 
 ```js
-import { useState } from 'react';
 import { useCounter } from './useCounter.js';
 
 export default function Counter() {

src/content/learn/preserving-and-resetting-state.md

@@ -439,7 +439,7 @@ function ChatRoom({ roomId, theme }) {
   // ...
 ```
 
-This solves the problem. Note that you had to *remove* `onConnected` from the list of your Effect's dependencies. **Effect Events are not reactive and must be omitted from dependencies.**
+This solves the problem. Note that you had to *remove* `theme` from the list of your Effect's dependencies, because it's no longer used in the Effect. You also don't need to *add* `onConnected` to it, because **Effect Events are not reactive and must be omitted from dependencies.**
 
 Verify that the new behavior works as you would expect:
 

src/content/learn/removing-effect-dependencies.md

@@ -48,7 +48,7 @@ The `preinit` function provides the browser with a hint that it should start dow
 * `options`: an object. It contains the following properties:
   *  `as`: a required string. The type of resource. Its possible values are `script` and `style`.
   * `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`. 
-  *  `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`. It is required when `as` is set to `"fetch"`.
+  *  `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`.
   *  `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
   *  `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. 
   *  `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -163,7 +163,7 @@ function CheckoutForm() {
 
 The function passed to `startTransition` is called the "Action". You can update state and (optionally) perform side effects within an Action, and the work will be done in the background without blocking user interactions on the page. A Transition can include multiple Actions, and while a Transition is in progress, your UI stays responsive. For example, if the user clicks a tab but then changes their mind and clicks another tab, the second click will be immediately handled without waiting for the first update to finish. 
 
-To give the user feedback about in-progress Transitions, to `isPending` state switches to `true` at the first call to `startTransition`, and stays `true` until all Actions complete and the final state is shown to the user. Transitions ensure side effects in Actions to complete in order to [prevent unwanted loading indicators](#preventing-unwanted-loading-indicators), and you can provide immediate feedback while the Transition is in progress with `useOptimistic`.
+To give the user feedback about in-progress Transitions, the `isPending` state switches to `true` at the first call to `startTransition`, and stays `true` until all Actions complete and the final state is shown to the user. Transitions ensure side effects in Actions to complete in order to [prevent unwanted loading indicators](#preventing-unwanted-loading-indicators), and you can provide immediate feedback while the Transition is in progress with `useOptimistic`.
 
 <Recipes titleText="The difference between Actions and regular event handling">
 
@@ -1948,3 +1948,162 @@ When clicking multiple times, it's possible for previous requests to finish afte
 This is expected, because Actions within a Transition do not guarantee execution order. For common use cases, React provides higher-level abstractions like [`useActionState`](/reference/react/useActionState) and [`<form>` actions](/reference/react-dom/components/form) that handle ordering for you. For advanced use cases, you'll need to implement your own queuing and abort logic to handle this.
 
 
+Example of `useActionState` handling execution order:
+
+<Sandpack>
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "beta",
+    "react-dom": "beta"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+```js src/App.js
+import { useState, useActionState } from "react";
+import { updateQuantity } from "./api";
+import Item from "./Item";
+import Total from "./Total";
+
+export default function App({}) {
+  // Store the actual quantity in separate state to show the mismatch.
+  const [clientQuantity, setClientQuantity] = useState(1);
+  const [quantity, updateQuantityAction, isPending] = useActionState(
+    async (prevState, payload) => {
+      setClientQuantity(payload);
+      const savedQuantity = await updateQuantity(payload);
+      return savedQuantity; // Return the new quantity to update the state
+    },
+    1 // Initial quantity
+  );
+
+  return (
+    <div>
+      <h1>Checkout</h1>
+      <Item action={updateQuantityAction}/>
+      <hr />
+      <Total clientQuantity={clientQuantity} savedQuantity={quantity} isPending={isPending} />
+    </div>
+  );
+}
+
+```
+
+```js src/Item.js
+import {startTransition} from 'react';
+
+export default function Item({action}) {
+  function handleChange(e) {
+    // Update the quantity in an Action.
+    startTransition(() => {
+      action(e.target.value);
+    });
+  }  
+  return (
+    <div className="item">
+      <span>Eras Tour Tickets</span>
+      <label htmlFor="name">Quantity: </label>
+      <input
+        type="number"
+        onChange={handleChange}
+        defaultValue={1}
+        min={1}
+      />
+    </div>
+  )
+}
+```
+
+```js src/Total.js
+const intl = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD"
+});
+
+export default function Total({ clientQuantity, savedQuantity, isPending }) {
+  return (
+    <div className="total">
+      <span>Total:</span>
+      <div>
+        <div>
+          {isPending
+            ? "🌀 Updating..."
+            : `${intl.format(savedQuantity * 9999)}`}
+        </div>
+        <div className="error">
+          {!isPending &&
+            clientQuantity !== savedQuantity &&
+            `Wrong total, expected: ${intl.format(clientQuantity * 9999)}`}
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+```js src/api.js
+let firstRequest = true;
+export async function updateQuantity(newName) {
+  return new Promise((resolve, reject) => {
+    if (firstRequest === true) {
+      firstRequest = false;
+      setTimeout(() => {
+        firstRequest = true;
+        resolve(newName);
+        // Simulate every other request being slower
+      }, 1000);
+    } else {
+      setTimeout(() => {
+        resolve(newName);
+      }, 50);
+    }
+  });
+}
+```
+
+```css
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.item label {
+  flex: 1;
+  text-align: right;
+}
+
+.item input {
+  margin-left: 4px;
+  width: 60px;
+  padding: 4px;
+}
+
+.total {
+  height: 50px;
+  line-height: 25px;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+}
+
+.total div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.error {
+  color: red;
+}
+```
+
+</Sandpack>

src/content/learn/separating-events-from-effects.md

@@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a
 
 </Note>
 
-When a Server Functions is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
+When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
 
 Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.