, который периодически запрашивает данные.
1) Если перейти на другую странницу он не останавливается
2) Если вернуться на эту страницу, то запускается еще раз без остановки предидущего
const [timer,setTimer] = useState(null)
useEffect(()=>{
let s_date = moment(props.date).format("YYYY-MM-DD");
let c_date = moment().format("YYYY-MM-DD");
if (s_date===c_date)
setTimer(setInterval(getData,5000))
else
clearInterval(timer)
getData()
return ()=>{
clearInterval(timer)
}
},[props.date])
Как можно поправить?
Использовать традиционные классы с жизненным циклом и стопать таймер на willUnmount
для этих целей есть useRef
return ()=>{ clearInterval(timer) } Разве не это делает?
А поподробнее с этого момента можно?
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
смотри - когда у тебя создается функция которую ты возвращаешь, в тот момент у тебя переменная timer будет еще в начальном значении (лучше почитать про хуки и как они работают) Если тебе нужны моментальные изменения есть хук useRef https://ru.reactjs.org/docs/hooks-reference.html#useref
первая ссылка из гугла 🌚
Component/PureComponent и стопать таймер при демонтировании, стартовать при монтировании. Куда более читабельно для 90% разрабов и гораздо лучше контроллируется поведение компонента.
разница? Там он сделает в стейте такой же объект и будет через this.setState менять
может просто достаточно все таки хуки осилить?
а отличная статья
Не обязательно в стейте, можно в атрибуте класса. Разница еще в более читабельном коде для большинства людей (писал выше).
Лютая субъективщина
или читабельном для тебя, не путай субъективное и объективное
Обсуждают сегодня