[React] SWR 조회시 무한루프에 걸렸던 사례 (useSWR, infinite loop)

By | 11월 4, 2021
  • 모듈 상단에서 아래의 swr함수를 호출하는데, useMemo()가 불필요하다고 생각되어 제거했더니 무한루프가 걸렸었음.

  • swr의 args로 들어가는 url string이 함수 내부에서 생성되어 계속 변경이 되니 무한루프가 발생했던 것이었음.

  • 결국 useMemo()를 다시 사용하여 해결

function useSWR(type: string, query?: any) {
    const url = useMemo(() => {
        switch(type){
        case '1':
            return '/board/01';
        case '2':
            return '/board/02';
        default:
            return null;
        }
    }, [type]);
    const result = useSWR<ResArticle>(query ? [url, JSON.stringify(query)] : null, (url, queryString) => customFetcher(url, JSON.parse(queryString)),
    );
    return result;
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments