React Hooks 와 setInterval 타이머가 잘 작동 안하는 이유
useEffect 훅과 setInterval을 쓰면 타이머가 작동하지 않는 등의 이상한 문제들 생김.
왜 그런지 예시를 들어 설명하는 글인데.. 그냥 '둘이 서로 nature가 달라서 안맞는다' 라는게 결론인 듯.
(useEffect는 state가 바뀌면 context가 바뀌는데, setInterval은 선언할때 context를 쭉 들고가므로, useEffect 안에 setInterval 쓰면 예기치 않은 충돌 생길 수도 있다 정도가 결론?)
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
Making setInterval Declarative with React Hooks
How I learned to stop worrying and love refs.
overreacted.io
이 글에서도 관련 내용 있다
https://haranglog.tistory.com/10
[React] 리액트에서 react-moment, moment.js 사용하여 실시간으로 변경되는 시간 만들기
✔ moment.js Moment js 는 시간이 포함된 데이터를 받아 조작해야 할 경우 가장 많이 사용되는 편리한 라이브러리입니다. 스터디를 모집하는 사이드 프로젝트를 만들 때 사용하였습니다. 현재 시간
haranglog.tistory.com
또 다른 연구글
Why Javascript timer is unreliable, and how can you fix it
If you are a Javascript developer, at some point in your career, you must have used setTimeout or setInterval. They are extremely handy if…
abhi9bakshi.medium.com
이것 때문에 생긴 내 문제?
https://github.com/hy2850/timer-react/issues/2
setInterval slows down with tab/window inactive · Issue #2 · hy2850/timer-react
10 seconds have passed in real time, but only 5~6 seconds changed on the Timer. Possible reasons behind the issue JS threading issue? (single thread) setInterval guarantees that the time gap betwee...
github.com
'<FE> > [React]' 카테고리의 다른 글
| [연습] 라이브러리 안쓰고 모달창 만들기 (0) | 2021.09.11 |
|---|---|
| [Hooks + Context] 리덕스없이 state 관리하기(context 개념 공부) (0) | 2021.09.11 |
| [Hooks] useEffect의 return값 (useEffect clean-up) (0) | 2021.07.16 |
| 클래스형 컴포넌트와 함수형의 차이 + 컴포넌트 LifeCycle (0) | 2021.05.16 |
| State VS Props (0) | 2021.05.05 |