최근 회사에서 React 개발 중 컴포넌트 렌더링시에 버벅거리는 (lagging) 현상이 나타났습니다. 새로고침하면 괜찮아지기도하면서 간헐적으로 발생했습니다.
추측했던 원인은 다음과 같습니다.
1. 잘못된 상태 관리로 인한 불필요한 리렌더링 발생
2. UI 라이브러리 컴포넌트 오사용으로 인한 오류
진짜 원인
하지만 다행히도(?) 진짜 원인은 Chrome DevTools였습니다. Chrome DevTools에서 애플리케이션을 모니터링하고 있다보니 렌더링에서 lagging 이 발생하는 것이었습니다. stackoverflow에서 답을 찾았습니다.
해결 방법
다음 방법들로 문제를 해결할 수 있습니다.
1. 사용하지 않는 breakpoint 제거
disable 되어있는 breakpoint도 존재만으로 lagging을 유도할 수 있습니다.
2. Settings - Preferences - Debugger - Disable async stack traces 체크
사소한 async 들을 capture하면서 lagging이 발생할 수 있습니다.
3. DevTools 닫기
최후의 수단입니다.
저의 경우는 1번에 해당하여 breakpoint들을 제거해보았습니다. 처음에는 문제가 해결된 것으로 보였으나 다시 문제가 발생하였습니다. 그래서 test 시에는 3번처럼 DevTools를 닫고 하는 것으로 자체 합의를 보았습니다.