diff --git a/TRANSLATION.md b/TRANSLATION.md index 439817f82..5676fdca2 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -73,6 +73,17 @@ | Орудний | _бандлером_ | _бандлерами_ | | Місцевий | _бандлері_ | _бандлерах_ | +Снепшот + +| Відмінок | Однина | Множина | +| --------- | ----------------------- | ------------ | +| Називний | _снепшот_ | _снепшоти_ | +| Родовий | _снепшоту_ | _снепшотів_ | +| Давальний | _снепшоту_/_снепшотові_ | _снепшотам_ | +| Знахідний | _снепшот_ | _снепшоти_ | +| Орудний | _снепшотом_ | _снепшотами_ | +| Місцевий | _снепшоті_/_cнепшотові_ | _снепшотах_ | + ## Таблиця перекладів | Оригінал | Переклад | @@ -159,6 +170,7 @@ | shallow | поверхове(а) (порівняння, рівність), поверховий (рендер) | | side effect | побічний ефект | | single-page application | односторінковий застосунок | +| snapshot | снепшот | | state | стан | | stateful component | компонент зі станом | | stateless component | компонент без стану | diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index df4eddbd6..4743088d1 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -1,27 +1,27 @@ --- -title: State as a Snapshot +title: Стан як снепшот --- -State variables might look like regular JavaScript variables that you can read and write to. However, state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. +Змінні стану можуть нагадувати звичайні змінні JavaScript, які можна зчитати та змінити. Проте стан поводиться радше як снепшот – окремий незмінний кадр. Задання йому значення не змінює наявну змінну стану, а натомість запускає повторний рендер. -* How setting state triggers re-renders -* When and how state updates -* Why state does not update immediately after you set it -* How event handlers access a "snapshot" of the state +* Як задання стану запускає повторні рендери +* Коли та як оновлюється стан +* Чому стан не оновлюється відразу після задання значення +* Як обробники подій звертаються до "снепшоту" стану -## Setting state triggers renders {/*setting-state-triggers-renders*/} +## Задання стану запускає рендери {/*setting-state-triggers-renders*/} -You might think of your user interface as changing directly in response to the user event like a click. In React, it works a little differently from this mental model. On the previous page, you saw that [setting state requests a re-render](/learn/render-and-commit#step-1-trigger-a-render) from React. This means that for an interface to react to the event, you need to *update the state*. +Можна уявляти, що інтерфейс користувача змінюється безпосередньо внаслідок дії користувача, наприклад, клацання. У React це працює трохи інакше, ніж передбачає ця ментальна модель. На попередній сторінці ви побачили, що [задання стану просить React про повторний рендер](/learn/render-and-commit#step-1-trigger-a-render). Це означає, що необхідно *оновити стан*, щоб інтерфейс зреагував на подію. -In this example, when you press "send", `setIsSent(true)` tells React to re-render the UI: +У цьому прикладі, якщо натиснути "надіслати", то `setIsSent(true)` каже React виконати повторний рендер UI: @@ -30,9 +30,9 @@ import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); - const [message, setMessage] = useState('Hi!'); + const [message, setMessage] = useState('Привіт!'); if (isSent) { - return

Your message is on its way!

+ return

Ваше повідомлення — в дорозі!

} return (
{ @@ -41,11 +41,11 @@ export default function Form() { sendMessage(message); }}>