[Batching] React-Query 의 상태가 여러개면 상태도 여러번 변할까 ?

[yunseorim1116]

네트워크 통신 : 1번

useEffect 로 통신했을때

[코드]

useEffect(() => {
    const getTodo2 = async (id) => {
      const res = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${id}`
      );
      return await res.data;
    };
    const fetchData = async () => {
      const test = await getTodo2(1);
      console.log(test);
    };
    fetchData();
  }, []); 

[이미지]

React-Query 로 통신했을때

[코드]

  const { data } = useQuery({
    queryKey: ['getTodo', id],
    queryFn: () => getTodo(id),
  });

[이미지]

React-Query 로 통신했을때2 (data + isLoading)

[코드]

  const { data, isLoading } = useQuery({
    queryKey: ['getTodo', id],
    queryFn: () => getTodo(id),
  });

[이미지]

결론

1. 리액트 쿼리의 상태는 리액트의 상태와 같다
2. 상태는 배칭해서 한번에 업데이트하기 때문에 (data,isLoading,isFetching 등 여러개의 상태가 변해도) 리렌더가 여러번 발생하지 않는다.

• 실험의 결과물 & 저의 뇌피셜 입니다.
• 잘못된 정보라 생각되면, 댓글로 반박 가능합니다.
• 언제든 의견 주세요! (환영!!!)