Translate preserving and resetting state #627
Open
+225
−225
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
Collaborator
|
@Dmytrii248 дякую за PR, гляну за змоги. окремі фікси краще окремим PR надсилати, вони набагато швидше будуть влиті UI краще зберегти оригінальний, ми поки що не вносимо ніяких змін крім прямого перекладу, треба поки що берегти консистентність |
Contributor
Author
|
@alinkedd Гаразд, виправлення залию окремим PR. Ось власне основна причина зміни UI. Якщо потрібно то поверну до оригіналу (до)
|
alinkedd
requested changes
Oct 19, 2025
Collaborator
alinkedd
left a comment
alinkedd
left a comment
There was a problem hiding this comment.
Дякую за PR!
Це перша частина перевірки. Було перевірено приклади і деякі слововживання чи пунктуаційні правила.
Запити на зміни мають бути виправлені і перевірені у всій статті до того, як я почну вичитувати текст у наступних частинах перевірки, щоб зменшити кількість когнітивного навантаження від коректури та редактури того самого. Немає вимог, коли має бути виправлено, це буде просто послідовна асинхронна взаємодія перевірка-зміни-перевірка-зміни-перевірка тощо.
alinkedd
added
Чекає на зміни
Редактура не завершена
and removed
Чекає на перевірку
labels
Co-authored-by: Alina Listunova <[email protected]>
alinkedd
requested changes
Dec 14, 2025
Collaborator
alinkedd
left a comment
alinkedd
left a comment
There was a problem hiding this comment.
до 485 (## Different components at the same position reset state)
| * How to force React to reset component's state | ||
| * How keys and types affect whether the state is preserved | ||
| * Коли React зберігає або скидає стан | ||
| * Як примусити React скинути стан компоненти |
Collaborator
There was a problem hiding this comment.
Suggested change
| * Як примусити React скинути стан компоненти | |
| * Як примусити React скинути стан компонента |
вживаємо компонент (в родовому компонента), а не компонента (в родовому компоненти) для перекладу component
| React будує [дерева рендерингу](learn/understanding-your-ui-as-a-tree#the-render-tree) для структури компонентів у вашому інтерфейсі. | ||
|
|
||
| When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree. | ||
| Коли ви надаєте компоненту стан, ви можете подумати, що стан "живе" всередині компонента. Але насправді стан зберігається всередині React. React пов'язує кожен фрагмент стану, який він утримує, з відповідним компонентом, по тому де цей компонент знаходиться в дереві рендерингу. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Коли ви надаєте компоненту стан, ви можете подумати, що стан "живе" всередині компонента. Але насправді стан зберігається всередині React. React пов'язує кожен фрагмент стану, який він утримує, з відповідним компонентом, по тому де цей компонент знаходиться в дереві рендерингу. | |
| Коли ви надаєте компоненту стан, ви можете подумати, що стан "живе" всередині компонента. Але насправді стан зберігається всередині React. React пов'язує кожен фрагмент стану, який він утримує, з відповідним компонентом через його місце в дереві рендерингу. |
вживання 'знаходитися' - https://onlinecorrector.com.ua/%D0%B1%D1%83%D1%82%D0%B8-%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%83%D0%B2%D0%B0%D1%82%D0%B8-%D0%BC%D1%96%D1%81%D1%82%D0%B8%D1%82%D0%B8%D1%81%D1%8F/
| Коли ви надаєте компоненту стан, ви можете подумати, що стан "живе" всередині компонента. Але насправді стан зберігається всередині React. React пов'язує кожен фрагмент стану, який він утримує, з відповідним компонентом, по тому де цей компонент знаходиться в дереві рендерингу. | ||
|
|
||
| Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions: | ||
| У даному прикладі використовується тільки один JSX тег `<Counter />`, але він рендериться в двох різних позиціях. |
Collaborator
There was a problem hiding this comment.
Suggested change
| У даному прикладі використовується тільки один JSX тег `<Counter />`, але він рендериться в двох різних позиціях. | |
| У цьому прикладі використовується тільки один JSX-тег `<Counter />`, але він рендериться в двох різних позиціях. |
| <DiagramGroup> | ||
|
|
||
| <Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0."> | ||
| <Diagram name="preserving_state_tree" height={248} width={395} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Кожний дочірній компонент названий 'Counter' і обидва містять бульбашку стану з назвою 'count' із значенням 0."> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <Diagram name="preserving_state_tree" height={248} width={395} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Кожний дочірній компонент названий 'Counter' і обидва містять бульбашку стану з назвою 'count' із значенням 0."> | |
| <Diagram name="preserving_state_tree" height={248} width={395} alt="Діаграма дерева React-компонентів. Кореневий вузол позначений як 'div' та має двоє дочірніх компонентів. Кожний дочірній компонент має мітку 'Counter', і обидва містять бульбашку стану з міткою 'count' із значенням 0."> |
| </DiagramGroup> | ||
|
|
||
| **These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works. | ||
| **Це два окремі лічильника, оскільки кожен із них рендериться на своїй позиції в дереві.** Зазвичай вам не потрібно думати про ці позиції щоб використовувати React, але розуміння того, як це працює, може бути корисним. |
Collaborator
There was a problem hiding this comment.
Suggested change
| **Це два окремі лічильника, оскільки кожен із них рендериться на своїй позиції в дереві.** Зазвичай вам не потрібно думати про ці позиції щоб використовувати React, але розуміння того, як це працює, може бути корисним. | |
| **Це два окремі лічильника, оскільки кожен із них рендериться на своїй позиції в дереві.** Зазвичай вам не потрібно думати про ці позиції, щоб використовувати React, але розуміння того, як це працює, може бути корисним. |
|
|
||
|
|
||
| It's the same component at the same position, so from React's perspective, it's the same counter. | ||
| Це той самий компонент на тій самій позиції, отже з точки зору React, це той самий лічильник. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Це той самий компонент на тій самій позиції, отже з точки зору React, це той самий лічильник. | |
| Це той самий компонент на тій самій позиції, отже, на думку React, це той самий лічильник. |
вживання "з точки зору" - https://onlinecorrector.com.ua/%D0%BF%D0%BE%D0%B3%D0%BB%D1%8F%D0%B4-%D0%B4%D1%83%D0%BC%D0%BA%D0%B0/
| <Pitfall> | ||
|
|
||
| Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`: | ||
| Пам'ятайте, що **це позиція в дереві інтерфейсу користувача — не в розмітці JSX — для React це важливо!** Цей компонент має два `return` пункти з різними `<Counter />` тегами JSX в середині та зовні `if`: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Пам'ятайте, що **це позиція в дереві інтерфейсу користувача — не в розмітці JSX — для React це важливо!** Цей компонент має два `return` пункти з різними `<Counter />` тегами JSX в середині та зовні `if`: | |
| Пам'ятайте, що **це позиція в дереві інтерфейсу користувача — не в розмітці JSX — для React це важливо!** Цей компонент має дві `return`-частини з відповідно різними JSX-тегами `<Counter />` всередині `if` та зовні: |
|
|
||
|
|
||
| React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again: | ||
| React зберігатиме цей стан доти, доки ви рендерите той самий компонент у тій самій позиції в дереві. Щоб побачити це, збільште обидва лічильника, потім видаліть другий компонент, знявши прапорець "Рендерити другий лічильник", а потім додайте його назад, поставивши прапорець знову: |
Collaborator
There was a problem hiding this comment.
Suggested change
| React зберігатиме цей стан доти, доки ви рендерите той самий компонент у тій самій позиції в дереві. Щоб побачити це, збільште обидва лічильника, потім видаліть другий компонент, знявши прапорець "Рендерити другий лічильник", а потім додайте його назад, поставивши прапорець знову: | |
| React зберігатиме цей стан доти, доки ви рендерите той самий компонент у тій самій позиції в дереві. Щоб побачити це, збільште обидва лічильника, потім видаліть другий компонент, прибравши прапорець "Рендерити другий лічильник", а потім додайте його назад, встановивши прапорець знову: |
| </Sandpack> | ||
|
|
||
| You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return. | ||
| Ви можете очікувати, що стан буде обнулено, коли ви поставите прапорець, але цього не станеться! Це тому, що **обидва `<Counter />` теги рендеряться на тій самій позиції.** React не знає, де ви розміщуєте умови у вашій функції. Все, що він "бачить" — це дерево, що ви повертаєте. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Ви можете очікувати, що стан буде обнулено, коли ви поставите прапорець, але цього не станеться! Це тому, що **обидва `<Counter />` теги рендеряться на тій самій позиції.** React не знає, де ви розміщуєте умови у вашій функції. Все, що він "бачить" — це дерево, що ви повертаєте. | |
| Ви можете очікувати, що стан буде скинуто, коли ви встановите прапорець, але цього не станеться! Це тому, що **обидва теги `<Counter />` рендеряться на тій самій позиції.** React не знає, де ви розміщуєте умови у вашій функції. Все, що він "бачить" — це дерево, яке ви повертаєте. |
| Ви можете очікувати, що стан буде обнулено, коли ви поставите прапорець, але цього не станеться! Це тому, що **обидва `<Counter />` теги рендеряться на тій самій позиції.** React не знає, де ви розміщуєте умови у вашій функції. Все, що він "бачить" — це дерево, що ви повертаєте. | ||
|
|
||
| In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic. | ||
| В обох випадках, `App` компонент повертає `<div>` із `<Counter />` як першим дочірнім елементом. Для React ці два лічильника мають однакову "адресу": перший нащадок першого нащадка кореня. Ось як React зіставляє їх між попереднім і наступним рендерингом, незалежно від того, як ви структуруєте свою логіку. |
Collaborator
There was a problem hiding this comment.
Suggested change
| В обох випадках, `App` компонент повертає `<div>` із `<Counter />` як першим дочірнім елементом. Для React ці два лічильника мають однакову "адресу": перший нащадок першого нащадка кореня. Ось як React зіставляє їх між попереднім і наступним рендерингом, незалежно від того, як ви структуруєте свою логіку. | |
| В обох випадках компонент `App` повертає `<div>` із `<Counter />` як першим дочірнім елементом. Для React ці два лічильника мають однакову "адресу": перший нащадок першого нащадка кореня. Ось як React зіставляє їх між попереднім і наступним рендерингом, незалежно від того, як ви структуруєте свою логіку. |
alinkedd
requested changes
Dec 17, 2025
Collaborator
alinkedd
left a comment
alinkedd
left a comment
There was a problem hiding this comment.
До 824 ### Option 1: Rendering a component in different positions
| ## Різні компоненти на тій самій позиції скидають стан {/*different-components-at-the-same-position-reset-state*/} | ||
|
|
||
| In this example, ticking the checkbox will replace `<Counter>` with a `<p>`: | ||
| В цьому прикладі встановлення прапорця замінить `<Counter>` на `<p>`: |
Collaborator
There was a problem hiding this comment.
Suggested change
| В цьому прикладі встановлення прапорця замінить `<Counter>` на `<p>`: | |
| У цьому прикладі встановлення прапорця замінить `<Counter>` на `<p>`: |
| </Sandpack> | ||
|
|
||
| Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state. | ||
| Тут, ви перемикаєте між _різними_ типами компонент на одній позиції. Початково перший дочірній елемент `<div>` містив `Counter`. Але коли ви замінили його на `p`, React видалив `Counter` з дерева інтерфейсу та знищив його стан. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Тут, ви перемикаєте між _різними_ типами компонент на одній позиції. Початково перший дочірній елемент `<div>` містив `Counter`. Але коли ви замінили його на `p`, React видалив `Counter` з дерева інтерфейсу та знищив його стан. | |
| Тут ви перемикаєте між _різними_ типами компонентів на одній позиції. Початково перший дочірній елемент `<div>` містив `Counter`. Але коли ви замінили його на `p`, React видалив `Counter` із дерева інтерфейсу та знищив його стан. |
| <DiagramGroup> | ||
|
|
||
| <Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow."> | ||
| <Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'div' з єдиним дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 3. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'p', який виділено жовтим."> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'div' з єдиним дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 3. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'p', який виділено жовтим."> | |
| <Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілками, спрямованими від однієї до іншої. Перша секція містить компонент React із міткою 'div' із єдиним дочірнім елементом із міткою 'Counter', що містить бульбашковий стан із міткою 'count' та значенням 3. Центральна секція має той самий батьківський 'div', але дочірній компонент тепер видалено, на що вказує жовте зображення 'poof' ('зник'). Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом із міткою 'p', який виділено жовтим."> |
| <DiagramGroup> | ||
|
|
||
| <Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow."> | ||
| <Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'p'. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 0, що підсвічено жовтим."> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'p'. Центральна секція має той самий батьківський 'div' але дочірній компонент тепер видалено, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'Counter', що містить бульбашковий стан названий 'count' із значенням 0, що підсвічено жовтим."> | |
| <Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Діаграма з трьома секціями, розділеними стрілками, спрямованими від однієї до іншої. Перша секція містить компонент React із міткою 'div'. Центральна секція має той самий батьківський 'div', але дочірній компонент тепер видалено, на що вказує жовте зображення 'poof' ('зник'). Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом із міткою 'Counter', що містить бульбашковий стан із міткою 'count' та значенням 0, що виділено жовтим."> |
| </Sandpack> | ||
|
|
||
| The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well. | ||
| Стан лічильника скидається коли ви клацаєте на прапорець. Хоча ви рендерите `Counter`, перший дочірній елемент `div` змінюється з `div` на `section`. Коли дочірній елемент `div` було видалено з DOM, все дерево під ним (включаючи `Counter` та його стан) було також знищено. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Стан лічильника скидається коли ви клацаєте на прапорець. Хоча ви рендерите `Counter`, перший дочірній елемент `div` змінюється з `div` на `section`. Коли дочірній елемент `div` було видалено з DOM, все дерево під ним (включаючи `Counter` та його стан) було також знищено. | |
| Стан лічильника скидається, коли ви клацаєте на прапорець. Хоча ви рендерите `Counter`, перший дочірній елемент `div` змінюється з `div` на `section`. Коли дочірній елемент `div` було видалено з DOM, все дерево під ним (включно з `Counter` та його станом) було також знищено. |
| <DiagramGroup> | ||
|
|
||
| <Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow."> | ||
| <Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'div' з єдиним дочірнім елементом названим 'div', який має єдиний дочірній елемент названий 'Counter', що містить бульбашковий стан названий 'count' із значенням 0. Центральна секція має той самий батьківський 'div' але дочірні компоненти тепер видалені, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'section', що підсвічено жовтим, також із новим дочірнім елементом названим 'Counter' що містить бульбашковий стан названий 'count' із значенням 0, все підсвічено жовтим."> |
Collaborator
There was a problem hiding this comment.
Suggested change
| <Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Діаграма з трьома секціями, розділеними стрілкою, що переходить між ними. Перша секція містить компонент React названий 'div' з єдиним дочірнім елементом названим 'div', який має єдиний дочірній елемент названий 'Counter', що містить бульбашковий стан названий 'count' із значенням 0. Центральна секція має той самий батьківський 'div' але дочірні компоненти тепер видалені, на що вказує жовте зображення 'пуф'. Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом названим 'section', що підсвічено жовтим, також із новим дочірнім елементом названим 'Counter' що містить бульбашковий стан названий 'count' із значенням 0, все підсвічено жовтим."> | |
| <Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Діаграма з трьома секціями, розділеними стрілками, спрямованими від однієї до іншої. Перша секція містить компонент React із міткою 'div' із єдиним дочірнім елементом із міткою 'div', який має єдиний дочірній елемент із міткою 'Counter', що містить бульбашковий стан із міткою 'count' та значенням 0. Центральна секція має той самий батьківський 'div', але дочірні компоненти тепер видалені, на що вказує жовте зображення 'poof' ('зник'). Третя секція має знову той самий батьківський 'div', тепер із новим дочірнім елементом із міткою 'section', виділеним жовтим, у якому новий дочірній елемент із міткою 'Counter', що містить бульбашковий стан із міткою 'count' та значенням 0; все виділено жовтим."> |
| </DiagramGroup> | ||
|
|
||
| As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree. | ||
| Як правила, **якщо ви хочете зберегти стан між повторними рендерами, структура вашого дерева повинна "збігатися"** від одного рендера до іншого. Якщо структура відрізняється, стан знищується, оскільки React знищує стан, коли видаляє компонент із дерева. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Як правила, **якщо ви хочете зберегти стан між повторними рендерами, структура вашого дерева повинна "збігатися"** від одного рендера до іншого. Якщо структура відрізняється, стан знищується, оскільки React знищує стан, коли видаляє компонент із дерева. | |
| Зазвичай **якщо ви хочете зберегти стан між повторними рендерами, то і структура вашого дерева повинна "збігатися"** між рендерами. Якщо структура відрізняється, стан знищується, оскільки React знищує стан, коли видаляє компонент із дерева. |
| Ось чому вам не варто вкладати визначення функційних компонент. | ||
|
|
||
| Here, the `MyTextField` component function is defined *inside* `MyComponent`: | ||
| Тут, `MyTextField` функційний компонент визначено *всередині* `MyComponent`: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Тут, `MyTextField` функційний компонент визначено *всередині* `MyComponent`: | |
| Тут `MyTextField` функційний компонент визначено *всередині* `MyComponent`: |
| ## Скидання стану в тому самому місці {/*resetting-state-at-the-same-position*/} | ||
|
|
||
| By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn: | ||
| Початково, React зберігає стан компонента, поки він залишається на тому самому місці. Зазвичай, це саме те, що ви хочете, тому це має сенс як початкова поведінка. Але інколи вам може знадобитися скинути стан компонента. Розглянемо цей застосунок, який дозволяє двом гравцям відстежувати свої результати під час кожного ходу: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Початково, React зберігає стан компонента, поки він залишається на тому самому місці. Зазвичай, це саме те, що ви хочете, тому це має сенс як початкова поведінка. Але інколи вам може знадобитися скинути стан компонента. Розглянемо цей застосунок, який дозволяє двом гравцям відстежувати свої результати під час кожного ходу: | |
| Стандартно React зберігає стан компонента, поки він залишається на тому самому місці. Зазвичай це саме те, що ви хочете, тому логічно, що це початкова поведінка. Але інколи вам потрібно скинути стан компонента. Розглянемо цей застосунок, який дає змогу двом гравцям відстежувати свої результати щоходу: |
вживання дозволяти у непрямому https://onlinecorrector.com.ua/%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D0%B8-%D0%B7%D0%BC%D0%BE%D0%B3%D1%83-%D0%BD%D0%B0%D0%B3%D0%BE%D0%B4%D1%83/
| Але концептуально в цьому застосунку вони повинні бути двома окремими лічильниками. Вони можуть відображатися на одному й тому ж місці в інтерфейсі користувача, але один з них є лічильником для Тейлора, а інший — лічильником для Сари. | ||
|
|
||
| There are two ways to reset state when switching between them: | ||
| Є два способи скинути стан при перемиканні між ними: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Є два способи скинути стан при перемиканні між ними: | |
| Є два способи скинути стан під час перемикання між ними: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@alinkedd By your recommendation, I installed the spell checker and found a typo in the previous translation. Just need to change one letter.
How should I push that fix?
Thanks for the recommendation. It helps a lot!
I modified some styles in UI demos. I checked other translated versions, and they also did the same. Here is an example