Пишу на React. У меня возникли проблемы с пониманием того, что происходит с состоянием компонента при использовании хука useState совместно с функцией setInterval. Нужного поведения я добился, но в осадке чувствую, что кое-чего недопонял.
Что я пытаюсь реализовать: инкремент и декремент переменной хранимой в состоянии компонента при зажатии указателя на элементе DOM каждые (скажем 200, но это не важно)мс
У меня есть 3 варианта кода, 2 работают не так как задумано, а именно при зажатии "+" значение переменной меняется постоянно в 1 и тут же обратно в 0. Ну и один рабочий вариант.
Я понял, что это можно реализовать при помощи хука useEffect, в принципе мне удалось и без него, но вопрос в другом, почему 2 моих варианта ведут себя не так, как я ожидаю, а один из них все таки работает должным образом?
К слову, работоспособность варианта №3, при условии неработоспособности варианта №2 меня очень сильно удивляет, так как всегда считал подобное равнозначным.
Нерабочий вариант №1:
const IndexPage = function () {
const [count, setCount] = React.useState(0)
const [id, setId] = React.useState(null)
const delay = 200
function inc() {
let contextCount = count
setId(setInterval(setCount, delay, count + 1))
}
function dec() {
let contextCount = count
setId(setInterval(setCount, delay, count - 1))
}
function clean() {
clearInterval(id)
}
return (
<Layout>
<h1>{count}</h1>
<p style={btn} onPointerDown={inc} onPointerUp={clean}>
+
</p>
<p style={btn} onPointerDown={dec} onPointerUp={clean}>
-
</p>
</Layout>
)
}
export default IndexPage
Нерабочий вариант №2 (только изменённые функции):
function inc() {
let contextCount = count
setId(
setInterval(setCount, delay, ++contextCount)
)
}
function dec() {
let contextCount = count
setId(
setInterval(setCount, delay, --contextCount)
)
}
Рабочий вариант:
function inc() {
let contextCount = count
setId(
setInterval(() => {
setCount(++contextCount)
}, delay)
)
}
function dec() {
let contextCount = count
setId(
setInterval(() => {
setCount(--contextCount)
}, delay)
)
}