결론부터 말하자면, 라이프사이클에 있어서 하나의 인스턴스를 유지하기 위함이다.

useState의 인자로 함수를 넘길 시, 게으른 초기 상태(lazy initial state)를 활용하여 초기 한번만 생성할 수 있다. QueryClient는 쿼리의 캐시데이터가 저장되는 객체이기에 초기 렌더링 시 한 번만 생성되야 하기 때문이다.

Tanstack Query에서도 안정적인 QueryClient를 위해서 useState의 게으른 초기 상태를 이용할 것을 권장하고 있다.

게으른 초기 상태란?

컴포넌트가 처음 렌더링 되었을 때 한 번만 실행을 하여, 값을 상태값에 저장하는 것을 말한다.

예시 1 : 브라우저의 localStorage에서 한 번만 접근해서 초기 상태를 저장하고 싶은 경우

const [count,setCount] = useState(() => localStorage.getItem('count'));

Reference

https://jong6598.tistory.com/40

https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state

https://velog.io/@otterji/React-Hooks-내가-몰랐던-useState

https://tanstack.com/query/latest/docs/react/eslint/stable-query-client#rule-details

https://velog.io/@404/useState의-개으른-초기화