From 29866affa1cbb906cf33124bbe42f41fc0162665 Mon Sep 17 00:00:00 2001 From: STS Date: Fri, 31 Oct 2025 11:02:01 +0200 Subject: [PATCH 1/3] translate useOptimistic.md to Ukrainian --- src/content/reference/react/useOptimistic.md | 42 ++++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index b69a532f0..f00f37575 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -4,7 +4,7 @@ title: useOptimistic -`useOptimistic` is a React Hook that lets you optimistically update the UI. +`useOptimistic` — це хук, який дозволяє оптимістично (попередньо) оновлювати UI. ```js const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); @@ -16,13 +16,13 @@ title: useOptimistic --- -## Reference {/*reference*/} +## Опис {/*reference*/} ### `useOptimistic(state, updateFn)` {/*use*/} -`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending. +Хук `useOptimistic` дає змогу відображати особливий стан протягом виконання асинхронної дії. Він приймає певний стан як аргумент і повертає копію цього стану, яка може відрізнятися від переданого стану протягом виконання асинхронної дії, наприклад, мережевого запиту. Ви описуєте функцію, яка отримує поточний стан і вхідні дані для дії, та повертає «оптимістичний» стан, який буде відображатися, поки дія триває. -This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete. +Цей стан називається «оптимістичним», тому що зазвичай використовується, щоб показати користувачеві очікуваний результат одразу, навіть якщо на завершення дії потрібен певний час. ```js import { useOptimistic } from 'react'; @@ -32,35 +32,35 @@ function AppContainer() { state, // updateFn (currentState, optimisticValue) => { - // merge and return new state - // with optimistic value + // об’єднайте і поверніть новий стан + // з оптимістичним значенням } ); } ``` -[See more examples below.](#usage) +[Перегляньте більше прикладів нижче.](#usage) -#### Parameters {/*parameters*/} +#### Параметри {/*parameters*/} -* `state`: the value to be returned initially and whenever no action is pending. -* `updateFn(currentState, optimisticValue)`: a function that takes the current state and the optimistic value passed to `addOptimistic` and returns the resulting optimistic state. It must be a pure function. `updateFn` takes in two parameters. The `currentState` and the `optimisticValue`. The return value will be the merged value of the `currentState` and `optimisticValue`. +* `state`: значення, яке повертається перший раз та кожного разу, коли немає дії, що виконується. +* `updateFn(currentState, optimisticValue)`: функція, яка приймає поточний стан і оптимістичне значення, передане до `addOptimistic`, та повертає розрахований оптимістичний стан. Повинна бути чистою функцією. `updateFn` приймає два параметри: `currentState` і `optimisticValue`. Функція повертає значення, що об'єднує `currentState` і `optimisticValue`. -#### Returns {/*returns*/} +#### Результат {/*returns*/} -* `optimisticState`: The resulting optimistic state. It is equal to `state` unless an action is pending, in which case it is equal to the value returned by `updateFn`. -* `addOptimistic`: `addOptimistic` is the dispatching function to call when you have an optimistic update. It takes one argument, `optimisticValue`, of any type and will call the `updateFn` with `state` and `optimisticValue`. +* `optimisticState`: розрахований оптимістичний стан. Він дорівнює `state` допоки немає дії, що виконується, інакше він дорівнює значенню, яке повертає `updateFn`. +* `addOptimistic`: `addOptimistic` — це функція, яку потрібно викликати для оптимістичного оновлення. Вона приймає один аргумент `optimisticValue` будь-якого типу та викликає `updateFn` із `state` і `optimisticValue`. --- -## Usage {/*usage*/} +## Використання {/*usage*/} -### Optimistically updating forms {/*optimistically-updating-with-forms*/} +### Оптимістичне оновлення форм {/*optimistically-updating-with-forms*/} -The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome. +Хук `useOptimistic` дає змогу оптимістично оновлювати інтерфейс доки завершиться фонова операція, наприклад мережевий запит. У контексті форм такий підхід створює відчуття швидшої реакції застосунків. Коли користувач надсилає форму, замість очікування відповіді від сервера, інтерфейс одразу оновлюється і відображає очікуваний результат. -For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed. +Наприклад, коли користувач вводить повідомлення у форму й натискає кнопку «Надіслати», хук `useOptimistic` дозволяє одразу відобразити це повідомлення у списку з позначкою «Надсилання...», ще до того, як воно реально буде відправлене на сервер. Такий «оптимістичний» підхід створює відчуття швидкої роботи застосунку. Після цього форма справді намагається надіслати повідомлення у фоновому режимі. Коли сервер підтвердить, що повідомлення було отримано, позначка «Надсилання...» зникне. @@ -92,13 +92,13 @@ function Thread({ messages, sendMessageAction }) { return ( <>
- - + +
{optimisticMessages.map((message, index) => (
{message.text} - {!!message.sending && (Sending...)} + {!!message.sending && (Надсилання...)}
))} @@ -108,7 +108,7 @@ function Thread({ messages, sendMessageAction }) { export default function App() { const [messages, setMessages] = useState([ - { text: "Hello there!", sending: false, key: 1 } + { text: "Привіт!", sending: false, key: 1 } ]); async function sendMessageAction(formData) { const sentMessage = await deliverMessage(formData.get("message")); From 6ebb8bf2221819c70d106498746f3640f7e0455b Mon Sep 17 00:00:00 2001 From: STS Date: Wed, 5 Nov 2025 13:02:29 +0200 Subject: [PATCH 2/3] add fixes to useOptimistic.md after review --- src/content/reference/react/useOptimistic.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index f00f37575..21c7012e0 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -4,7 +4,7 @@ title: useOptimistic -`useOptimistic` — це хук, який дозволяє оптимістично (попередньо) оновлювати UI. +`useOptimistic` — це хук React, який дає змогу оптимістично (попередньо) оновлювати UI. ```js const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); @@ -20,9 +20,9 @@ title: useOptimistic ### `useOptimistic(state, updateFn)` {/*use*/} -Хук `useOptimistic` дає змогу відображати особливий стан протягом виконання асинхронної дії. Він приймає певний стан як аргумент і повертає копію цього стану, яка може відрізнятися від переданого стану протягом виконання асинхронної дії, наприклад, мережевого запиту. Ви описуєте функцію, яка отримує поточний стан і вхідні дані для дії, та повертає «оптимістичний» стан, який буде відображатися, поки дія триває. +Хук `useOptimistic` дає змогу відображати змінений стан під час виконання асинхронної дії. Він приймає певний стан як аргумент і повертає його копію, яка може відрізнятися від переданого стану протягом виконання асинхронної дії, наприклад, мережевого запиту. Ви надаєте функцію, яка отримує поточний стан і вхідні дані для дії, та повертає "оптимістичний" стан, який буде використовуватися, поки дія триває. -Цей стан називається «оптимістичним», тому що зазвичай використовується, щоб показати користувачеві очікуваний результат одразу, навіть якщо на завершення дії потрібен певний час. +Цей стан називається "оптимістичним", тому що зазвичай використовується, щоб показати користувачеві очікуваний результат одразу, навіть якщо на завершення дії потрібен певний час. ```js import { useOptimistic } from 'react'; @@ -43,14 +43,14 @@ function AppContainer() { #### Параметри {/*parameters*/} -* `state`: значення, яке повертається перший раз та кожного разу, коли немає дії, що виконується. -* `updateFn(currentState, optimisticValue)`: функція, яка приймає поточний стан і оптимістичне значення, передане до `addOptimistic`, та повертає розрахований оптимістичний стан. Повинна бути чистою функцією. `updateFn` приймає два параметри: `currentState` і `optimisticValue`. Функція повертає значення, що об'єднує `currentState` і `optimisticValue`. +* `state`: значення, яке повертається на початку та щоразу, коли немає дії, що виконується. +* `updateFn(currentState, optimisticValue)`: функція, яка приймає поточний стан і оптимістичне значення, передане до `addOptimistic`, та повертає розрахований оптимістичний стан. Повинна бути чистою функцією. `updateFn` приймає два параметри: `currentState` і `optimisticValue`. Функція повертає значення, створене через об'єднання `currentState` і `optimisticValue`. #### Результат {/*returns*/} -* `optimisticState`: розрахований оптимістичний стан. Він дорівнює `state` допоки немає дії, що виконується, інакше він дорівнює значенню, яке повертає `updateFn`. -* `addOptimistic`: `addOptimistic` — це функція, яку потрібно викликати для оптимістичного оновлення. Вона приймає один аргумент `optimisticValue` будь-якого типу та викликає `updateFn` із `state` і `optimisticValue`. +* `optimisticState`: розрахований оптимістичний стан. Допоки немає дії, що виконується, він дорівнює `state`, інакше він дорівнює значенню, яке повертає `updateFn`. +* `addOptimistic`: `addOptimistic` — це функція для надсилання змін, яку потрібно викликати для оптимістичного оновлення. Вона приймає один аргумент `optimisticValue` будь-якого типу та викликає `updateFn` із `state` і `optimisticValue`. --- @@ -58,9 +58,9 @@ function AppContainer() { ### Оптимістичне оновлення форм {/*optimistically-updating-with-forms*/} -Хук `useOptimistic` дає змогу оптимістично оновлювати інтерфейс доки завершиться фонова операція, наприклад мережевий запит. У контексті форм такий підхід створює відчуття швидшої реакції застосунків. Коли користувач надсилає форму, замість очікування відповіді від сервера, інтерфейс одразу оновлюється і відображає очікуваний результат. +Хук `useOptimistic` дає змогу оптимістично оновлювати інтерфейс, поки завершується фонова операція, наприклад, мережевий запит. У контексті форм такий підхід створює відчуття швидшої реакції застосунків. Коли користувач надсилає форму, замість очікування відповіді від сервера для змін, інтерфейс одразу оновлюється і відображає очікуваний результат. -Наприклад, коли користувач вводить повідомлення у форму й натискає кнопку «Надіслати», хук `useOptimistic` дозволяє одразу відобразити це повідомлення у списку з позначкою «Надсилання...», ще до того, як воно реально буде відправлене на сервер. Такий «оптимістичний» підхід створює відчуття швидкої роботи застосунку. Після цього форма справді намагається надіслати повідомлення у фоновому режимі. Коли сервер підтвердить, що повідомлення було отримано, позначка «Надсилання...» зникне. +Наприклад, коли користувач вводить повідомлення у форму й натискає кнопку "Надіслати", хук `useOptimistic` дає змогу одразу відобразити це повідомлення у списку з позначкою "Надсилання...", ще до того, як воно реально буде відправлене на сервер. Такий "оптимістичний" підхід створює враження швидкодії та миттєвого відгуку інтерфейсу. Після цього форма справді намагається надіслати повідомлення у фоновому режимі. Коли сервер підтвердить, що повідомлення було отримано, позначка "Надсилання..." зникне. From 2ee5314368103bad0de010ef8c5662efbfcb3464 Mon Sep 17 00:00:00 2001 From: Tetiana Serbina Date: Mon, 10 Nov 2025 11:21:17 +0200 Subject: [PATCH 3/3] Apply suggestions from code review to useOptimistic.md Co-authored-by: Alina Listunova --- src/content/reference/react/useOptimistic.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md index 21c7012e0..33ad27205 100644 --- a/src/content/reference/react/useOptimistic.md +++ b/src/content/reference/react/useOptimistic.md @@ -32,7 +32,7 @@ function AppContainer() { state, // updateFn (currentState, optimisticValue) => { - // об’єднайте і поверніть новий стан + // об'єднайте і поверніть новий стан // з оптимістичним значенням } ); @@ -50,7 +50,7 @@ function AppContainer() { #### Результат {/*returns*/} * `optimisticState`: розрахований оптимістичний стан. Допоки немає дії, що виконується, він дорівнює `state`, інакше він дорівнює значенню, яке повертає `updateFn`. -* `addOptimistic`: `addOptimistic` — це функція для надсилання змін, яку потрібно викликати для оптимістичного оновлення. Вона приймає один аргумент `optimisticValue` будь-якого типу та викликає `updateFn` із `state` і `optimisticValue`. +* `addOptimistic`: `addOptimistic` — це функція для надсилання змін (dispatching function), яку потрібно викликати для оптимістичного оновлення. Вона приймає один аргумент `optimisticValue` будь-якого типу та викликає `updateFn` із `state` і `optimisticValue`. ---