Привет Хабр!
Как вы знаете при переходе с компонентов классов на функциональные, у нас отняли такую полезную вещь как this, которая указывает на текущий экземпляр компонента. И конечно у нас возник вопрос: “а где же тогда хранить timeoutId
?”. И я видел как люди по разному выкручивались из этой проблемы (Данная статья, является расшифровкой видео)
Например, если timeoutId
используется только в рамках одного useEffect
можно набросать следующий вариант:
useEffect(() => {
const timeout = setTimeout(() => {
// do some action
}, 3000);
return () => {
clearTimeout(timeout);
}
}, [...]);
Данный подход работает, но когда появляется нужда очищать timeout
по клику на кнопку, этот подход уже не работает.
Поэтому многие решили, просто создавать переменную вне компонента и хранить в ней id
этого тайм-аута, чтобы например по клику иметь возможность его отменить:
let timeout;
const Test = () => {
const onClick = () => clearTimeout(timeout);
useEffect(() => {
timeout = setTimeout(() => {
// do some action
}, 3000);
}, [...]);
return (...);
}
И это работает в большинстве случаев без каких-либо проблем. Но как всегда есть “НО”.
Проблема глобальных переменных
Давайте рассмотрим пример. Допустим у нас есть компонент Counter, в котором есть локальный счетчик и глобальный счетчик определенный вне компонента:
let globalCounter = 0;
const Counter = () => {
const [stateCounter, setStateCounter] = useState(0);
const onClick = () => {
globalCounter++;
setStateCounter((stateCounter) => stateCounter + 1);
};
return (
<div>
<p>global counter - <b>{globalCounter}</b></p>
<p>state counter - <b>{stateCounter}</b></p>
<button onClick={onClick}>increment</button>
</div>
);
}
Компонент достаточно простой. Теперь добавим родительский компонент:
const App = () => {
const [countersNumber, setCountersNumber] = useState(0);
return (
<div>
<button onClick={setCountersNumber((count) => count + 1)}>
add
</button>
<button onClick={setCountersNumber((count) => count - 1)}>
removed
</button>
{[...Array.from(countersNumber).keys()].map((index) => (
<Counter key={index} />
))}
</div>
);
};
Здесь мы храним в state
количество счетчиков, и ниже имеем 2 кнопки: для увеличения количества счетчиков и для уменьшения. И собственно вставляем сами счетчики в таком количество, как у нас указано в переменной countersNumber
.
Смотрим результат
Перейдем в браузер и выполним следующие действия:
Добавим один счетчик;
Внутри появившегося счетчика, нажмем "increment" три раза;
Добавим второй счетчик.
![](https://habrastorage.org/getpro/habr/upload_files/28a/95f/4d7/28a95f4d7f9c320b642fd616c98a86be.jpg)
Как вы видите у второго глобального каунтера значение три. И не важно сколько счетчиков вы создадите, они все замыкаются на одну и ту же глобальную переменную. И даже если вы удалите все счетчики, а потом добавите новый счетчик, конечно же глобальный каунтер все равно будет равен трем, так как глобальная переменная создается при запуске сайта и очищается при полном закрытии табы в браузере с вашим сайтом.
Таким образом, хранение timeoutId
в такого рода глобальной переменной, может привести к странным багам. Да и если у вас в проекте огромное количество таких переменных, вы бесполезно засоряете память вашего компьютера, хоть это возможно и экономия на спичках.
Рассмотрим альтернативу
Решением данной проблемы является использование хука useRef()
. Именно это и рекомендует React документация:
![](https://habrastorage.org/getpro/habr/upload_files/3a8/933/a4e/3a8933a4e46bde5694028db92efa2918.jpg)
Они прямо упомянули, что useRef()
нужно использовать как аналог this
. И более того, для удобства добавили в useRef()
возможность передачи начального значения. Поэтому вариант с timeout
может выглядеть следующим образом:
const Test = () => {
const timeout = useRef();
const onClick = () => clearTimeout(timeout.current);
useEffect(() => {
timeout.current = setTimeout(() => {
// do some action
}, 3000);
}, [...]);
return (...);
}
Возможно в этом решении вас смущает, то что в timeout
начинает храниться свойство current
, это действительно выглядит немного странно, но у этого есть разумное объяснение, о котором мы рассказывали в предыдущей статье “createRef, setRef, useRef и зачем нужен current в ref”.
prevProps не исчезли вместе с классами
Использование useRef()
для хранения timeout
это конечно же очень полезно. Но есть и более интересные способы использования. Например, в компонентах в виде классов есть удобный метод жизненного цикла componentDidUpdate
. В качестве первого параметра нам предоставляют prevProps
, т.е. props
из предыдущей итерации. Это давало нам возможность, сравнивать props
из текущей итерации с props
из предыдущей. На основании этого выполнять какие-то действия.
componentDidUpdate(prevProps) {
if (this.props.id !== prevProps.id) {
// do some action
}
}
Если вам кажется, что эту функциональность у вас отняли безвозвратно, тогда вы ошибаетесь.
Давайте напишем хук, который будет возвращать props
из предыдущей итерации:
const useGetPrevValue = (value) => {
const prevValueRef = useRef();
useEffect(() => {
prevValueRef.current = value;
});
return prevValueRef.current;
};
Здесь мы получаем value
из текущей итерации, после создадим ref
для хранения данных между итерациями. И в рамках текущей итерации мы вернем текущее значение current
равное null
. Но перед началом следующей итерации мы обновим current
значение, таким образом в следующей итерации в ref
у нас будет хранится значение из предыдущей.
И осталось только использовать этот хук:
const CounterView = ({ counter }) => {
const prevCount = useGetPrevValue(counter);
const classes = classNames({
[styles.greenCounter]: counter < prevCounter,
[styles.redCounter] counter > prevCounter,
});
...
}
В итоге, имея значение counter
из предыдущей итерации и из текущей итерации, мы можем покрасить в зеленый цвет, если counter
уменьшился, или в красный, если counter
увеличился.
Расширяйте сознание
Мы упомянули лишь несколько базовых вариантов использования ref
для решения нетипичных для ref
задач. Но их гораздо больше. Например, если вы откроете телеграм десктоп версии, и будете скролить вверх, то у вас будет отображаться дата, а если вниз, она исчезнет. Мы можем хранить предыдущее значение скрола в ref
, для того чтобы вычислить в какую же сторону скролит пользователь.
![](https://habrastorage.org/getpro/habr/upload_files/c58/5a0/182/c585a018215380a80786140c6e57247b.jpg)
Как вы уже догадались, использование ref
ограничено лишь вашей фантазией и вы найдете ему гораздо больше вариантов применения, чем мы упомянули в этой статье.
И если вы знаете еще какие-то интересные варианты использования ref
обязательно пишите в комментариях