notifyManager

01무엇

notifyManager는 TanStack Query 내부에서 콜백 실행을 모으고 스케줄링하는 저수준 매니저다. 짧은 시간 안에 몰리는 업데이트를 배치로 묶어 리렌더를 줄인다.

import { notifyManager } from '@tanstack/react-query'

애플리케이션 코드가 직접 호출할 일은 드물다. 대부분 프레임워크 어댑터나 테스트 설정에서 쓴다.

02무슨 일이 일어나나

QueryClient는 상태가 바뀔 때마다 구독자에게 곧바로 알리는 대신 notifyManager를 거친다. batch로 감싼 콜백 안에서 일어나는 여러 업데이트는 한 번에 처리되고, batchCalls로 감싼 함수는 여러 번 불려도 실제 실행은 다음 배치 사이클에 한 번만 일어난다. 그 "다음"이 언제인지는 schedule이 정하는데, 기본은 setTimeout이다.

03사용법

스케줄링 타이밍을 바꿀 때 setScheduler를 쓴다. 마이크로태스크나 다음 프레임으로 옮길 수 있다.

import { notifyManager } from '@tanstack/react-query'

notifyManager.setScheduler(queueMicrotask) // 마이크로태스크로
// notifyManager.setScheduler(requestAnimationFrame) // 다음 프레임으로

프레임워크 통합에서는 setBatchNotifyFunction으로 그 프레임워크의 배치 함수를 꽂는다.

import { batch } from 'solid-js'
import { notifyManager } from '@tanstack/react-query'

notifyManager.setBatchNotifyFunction(batch)

04실무 예시

테스트에서 React의 act 경고를 없앨 때 setNotifyFunction을 쓰는 게 애플리케이션 코드에서 거의 유일하게 마주치는 경우다.

import { act } from '@testing-library/react'
import { notifyManager } from '@tanstack/react-query'

notifyManager.setNotifyFunction(act)

05왜 중요한가

React 어댑터가 이미 내부적으로 배치를 최적화해 두었기 때문에, 애플리케이션 코드가 이 매니저를 직접 부를 일은 거의 없다. 존재 이유는 프레임워크 어댑터를 새로 만들거나(Solid, Vue 등) 테스트 환경을 맞출 때다. 평소 쿼리를 쓰는 코드에서는 몰라도 되는 내부 배관이다.

Reference