React 19에서 Suspense fallback이 더 길게 보인다

최근 회사에서 명령형으로 선언되었던 loading, error 처리를 선언적으로 변경하기 위해 Suspense로 마이그레이션 작업을 하고 있었다. 그러던 중 눈에 띄게 fallback 컴포넌트가 이전보다 더 길게 보이는 것을 발견했다.

원인 파악을 위해 네트워크 탭을 열고 waterfall을 확인했지만 이상이 없었다. 네트워크 요청 시간도 문제가 없어 원인을 알 수 없었다. 새로운 페이지를 만들어 다른 쿼리로 테스트를 해보아도 같은 현상이 발생했다. 우연히 React 18 버전과 19 버전 관련 이슈일 수도 있다는 추측 글을 확인해 테스트를 진행했다.

생각지도 못한 결과가 나왔다.

리액트 18에서는 네트워크 요청 시간만큼만 fallback이 보였는데, 19에서는 평균 250ms 동안 보였다. 원인을 파악해 커뮤니티를 뒤지다가 관련 이슈를 찾았다.

[React 19] Suspense throttling behavior (FALLBACK_THROTTLE_MS) kicks in too often

요약하면 의도된 설계라고 한다. 300ms throttling은 UX를 크게 저해하지 않기 때문에 최솟값으로 설정해뒀다고 하는데, 여론이 장난이 아니다. 꽤 오래된 이슈인데도 최근 릴리즈에서도 반영이 안 된 것 같다. 앞으로 리액트가 이 이슈를 어떻게 처리할지 지켜봐야겠다.