Чтобы обновлять React-компонент каждую секунду, нужно использовать setInterval() для запуска изменений состояния с регулярными интервалами. Но правильная очистка — это обязательно, иначе получишь утечки памяти и ошибки.
Решение использует два метода жизненного цикла, которые работают вместе:
componentDidMount() — запускает интервал, когда компонент монтируетсяcomponentWillUnmount() — останавливает интервал, когда компонент размонтируетсяcomponentDidMount() {
this.interval = setInterval(() => {
this.setState({ time: Date.now() })
}, 1000)
}
componentWillUnmount() {
clearInterval(this.interval)
}
Если не очистить интервал, получишь утечки памяти, потому что:
Для функциональных компонентов с React Hooks используй хук useEffect():
useEffect(() => {
const interval = setInterval(() => {
setTime(Date.now())
}, 1000)
return () => clearInterval(interval)
}, [])
Функция очистки (которую ты возвращаешь из useEffect) автоматически вызовется при размонтировании компонента, гарантируя корректное управление ресурсами без ручного вмешательства.
Метод жизненного цикла componentWillUnmount() должен вызывать clearInterval(), чтобы предотвратить утечки памяти, которые происходят, когда интервалы продолжают выполняться после удаления компонента из DOM.
Новый — ещё не проверен сообществом
Вы