You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/hooks-faq.md
+1-50Lines changed: 1 addition & 50 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
---
1
+
---
2
2
id: hooks-faq
3
3
title: "Хуки: ответы на вопросы"
4
4
permalink: docs/hooks-faq.html
@@ -333,58 +333,10 @@ function useWindowPosition() {
333
333
334
334
### Как получить предыдущие пропсы или состояние? {#how-to-get-the-previous-props-or-state}
335
335
336
-
<<<<<<< HEAD
337
-
Сейчас, вы можете сделать это вручную, [используя реф](#is-there-something-like-instance-variables):
338
-
=======
339
336
There are two cases in which you might want to get previous props or state.
340
-
>>>>>>> ee7705675d2304c53c174b9fb316e2fbde1e9fb3
341
337
342
338
Sometimes, you need previous props to **clean up an effect.** For example, you might have an effect that subscribes to a socket based on the `userId` prop. If the `userId` prop changes, you want to unsubscribe from the _previous_`userId` and subscribe to the _next_ one. You don't need to do anything special for this to work:
343
339
344
-
<<<<<<< HEAD
345
-
const prevCountRef = useRef();
346
-
useEffect(() => {
347
-
prevCountRef.current = count;
348
-
});
349
-
const prevCount = prevCountRef.current;
350
-
351
-
return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
352
-
}
353
-
```
354
-
355
-
Это может показаться усложнённым, но вы можете вынести эту логику в отдельный хук:
356
-
357
-
```js{3,7}
358
-
function Counter() {
359
-
const [count, setCount] = useState(0);
360
-
const prevCount = usePrevious(count);
361
-
return <h1>Сейчас: {count}, до этого: {prevCount}</h1>;
362
-
}
363
-
364
-
function usePrevious(value) {
365
-
const ref = useRef();
366
-
useEffect(() => {
367
-
ref.current = value;
368
-
});
369
-
return ref.current;
370
-
}
371
-
```
372
-
373
-
Обратите внимание, как это будет работать для пропсов, состояния или любого другого вычисляемого значения.
374
-
375
-
```js{5}
376
-
function Counter() {
377
-
const [count, setCount] = useState(0);
378
-
379
-
const calculation = count + 100;
380
-
const prevCalculation = usePrevious(calculation);
381
-
// ...
382
-
```
383
-
384
-
Возможно, в будущем API React введёт хук `usePrevious`, так как он требуется довольно часто.
385
-
386
-
Также смотрите [рекомендованный паттерн для производного состояния](#how-do-i-implement-getderivedstatefromprops).
387
-
=======
388
340
```js
389
341
useEffect(() => {
390
342
ChatAPI.subscribeToSocket(props.userId);
@@ -397,7 +349,6 @@ In the above example, if `userId` changes from `3` to `4`, `ChatAPI.unsubscribeF
397
349
Other times, you might need to **adjust state based on a change in props or other state**. This is rarely needed and is usually a sign you have some duplicate or redundant state. However, in the rare case that you need this pattern, you can [store previous state or props in state and update them during rendering](#how-do-i-implement-getderivedstatefromprops).
398
350
399
351
We have previously suggested a custom Hook called `usePrevious` to hold the previous value. However, we've found that most use cases fall into the two patterns described above. If your use case is different, you can [hold a value in a ref](#is-there-something-like-instance-variables) and manually update it when needed. Avoid reading and updating refs during rendering because this makes your component's behavior difficult to predict and understand.
400
-
>>>>>>> ee7705675d2304c53c174b9fb316e2fbde1e9fb3
401
352
402
353
### Почему я вижу устаревшие пропсы или состояние в моей функции? {#why-am-i-seeing-stale-props-or-state-inside-my-function}
0 commit comments