Skip to content

Commit 70db7d7

Browse files
committed
Translated usage of state updater in useEffect
1 parent a453644 commit 70db7d7

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/content/reference/react/useEffect.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1415,27 +1415,27 @@ button { margin-left: 5px; }
14151415

14161416
---
14171417

1418-
### Updating state based on previous state from an Effect {/*updating-state-based-on-previous-state-from-an-effect*/}
1418+
### Обновление в эффекте состояния на основе предыдущего состояния {/*updating-state-based-on-previous-state-from-an-effect*/}
14191419

1420-
When you want to update state based on previous state from an Effect, you might run into a problem:
1420+
Если вы захотите обновлять в эффекте состояние на основе его предыдущего значения, то можете наткнуться на проблему:
14211421

14221422
```js {6,9}
14231423
function Counter() {
14241424
const [count, setCount] = useState(0);
14251425
14261426
useEffect(() => {
14271427
const intervalId = setInterval(() => {
1428-
setCount(count + 1); // You want to increment the counter every second...
1428+
setCount(count + 1); // Хотим увеличивать `count` каждую секунду...
14291429
}, 1000)
14301430
return () => clearInterval(intervalId);
1431-
}, [count]); // 🚩 ... but specifying `count` as a dependency always resets the interval.
1431+
}, [count]); // 🚩 ... но из-за того, что `count` в зависимостях, интервал постоянно перезапускается.
14321432
// ...
14331433
}
14341434
```
14351435

1436-
Since `count` is a reactive value, it must be specified in the list of dependencies. However, that causes the Effect to cleanup and setup again every time the `count` changes. This is not ideal.
1436+
Т.к. `count` -- это реактивное значение, то оно должно быть указано в списке зависимостей. Но из-за этого эффекту приходится сбрасываться и запускаться заново каждый раз, когда `count` обновляется. Выглядит не идеально.
14371437

1438-
To fix this, [pass the `c => c + 1` state updater](/reference/react/useState#updating-state-based-on-the-previous-state) to `setCount`:
1438+
Можно сделать лучше, если передавать в `setCount` [функцию обновления состояния `c => c + 1`:](/reference/react/useState#updating-state-based-on-the-previous-state)
14391439

14401440
<Sandpack>
14411441

@@ -1447,10 +1447,10 @@ export default function Counter() {
14471447
14481448
useEffect(() => {
14491449
const intervalId = setInterval(() => {
1450-
setCount(c => c + 1); // ✅ Pass a state updater
1450+
setCount(c => c + 1); // ✅ Передаём функцию обновления
14511451
}, 1000);
14521452
return () => clearInterval(intervalId);
1453-
}, []); // ✅ Now count is not a dependency
1453+
}, []); // ✅ Теперь `count` нет в зависимостях.
14541454
14551455
return <h1>{count}</h1>;
14561456
}
@@ -1470,7 +1470,7 @@ body {
14701470

14711471
</Sandpack>
14721472

1473-
Now that you're passing `c => c + 1` instead of `count + 1`, [your Effect no longer needs to depend on `count`.](/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state) As a result of this fix, it won't need to cleanup and setup the interval again every time the `count` changes.
1473+
Поскольку вместо `count + 1` теперь передаётся `c => c + 1`, то [больше нет нужды указывать `count` в зависимостях эффекта.](/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state) А значит эффекту больше не приходится сбрасывать и заново устанавливать интервал каждый раз, когда изменяется `count`.
14741474

14751475
---
14761476

0 commit comments

Comments
 (0)