Next.js React SetInterval 시, 계속해서 해출하는 이슈 발생

해외주식 | 부동산 | 국내주식 | 투잡 | N잡

개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich

Next.js React SetInterval 시, 계속해서 해출하는 이슈 발생

영리치 0 93 01.04 10:14

리액트 컴포넌트 안에서 setInterval 호출하면 얘가 리액트 상태 변화 있을 때마다 계속 호출되어서 무한 호출됨

const updateSource = setInterval(async () => {
      const geojson = await getLocation(updateSource);
      // mapRef.current?.getSource("iss").setData(geojson);
    }, 5000);

따라서 useEffect 안에 감싸서 한 번만 호출될 수 있도록 해야함

useEffect(() => {
    const updateSource = setInterval(async () => {
      const geojson = await getLocation(updateSource);
      // mapRef.current?.getSource("iss").setData(geojson);
    }, 5000);
  }, []);