[2022-11-02] 리렌더링과 메모이징

 

const RegionMapScreen: React.FC = () => {

  const [selectedStoreId, setSelectedStoreId] = useState<number>();

  const {stores} = useStores({
    regionIds: [regionId],
    pageSize: MAXIMUM_NUMBER_OF_MARKER,
  });

  return (
  	<MapView>{stores}</MapView>
  	<Button>{selectedStoreId의 상태를 변경시키는 버튼}</Button>
    <View>{selectedStoreId}</View>
  );
};

selectedStoreId 상태가 변경되어 RegionMapScreen이 리렌더링 되었을 때 data값도 바뀐것으로 처리된 현상이 있었다

그렇다면 useStores를 보자!

 

아 useStores를 보기 전에 나의 개념을 헷갈리게 한 점이 있다.

"selectedStoreId"의 상태값이 바뀌어 "리렌더링"이 되었을 때 "selectedStoreId"가 바뀐거니깐 useStores는 실행이 안되나??

매우 초보자같은 생각이었다. 리렌더링이 되었음으로 무조건 useStores는 실행된다. 

흠 그럼 data는 바뀐것으로 처리된게 맞는거 아니야 ? 그렇다 하지만 우리는 "selectedStoreId"가 바뀌어서 리렌더링이 된 것임으로 data는 안바뀌게 처리해야한다!! 

 

const useStores = (params: Params) => {
  const {data, hasNextPage, fetchNextPage, isFetched} = useInfiniteQuery(
    [queryKeys.stores, params],
    ({pageParam = 1}) => getStores({...params, pageNo: pageParam}),
    {
      getNextPageParam: lastPage => lastPage.nextPage,
      keepPreviousData: true,
      refetchOnMount: false,
    },
  );

  const loadMore = useCallback(() => {
    if (hasNextPage) {
      fetchNextPage();
    }
  }, [hasNextPage, fetchNextPage]);
  
  const stores = data?.pages.flatMap(page => page.items);

  return {data, loadMore, isFetched, stores};
};

react query의 useInfiniteQuery를 사용하여 api요청을 통해 가게 목록을 받아오고 있다.

useStores가 실행되었을 때

useInfiniteQuery는 라이브러리 자체에서 메모이징 돼서 새롭게 data들을 생성하지 않을것이고

loadMore도 useCallback으로 메모이징하여 새롭게 함수가 정의되지 않을것이고

 

그렇다면 범인은 stores였다. 메모이징을 해주지 않아서 stores가 새롭게 계속 생성되고 있었던 것이다..

cto 님은 단번에 알아채심 ㄷㄷ. 아임 베리 초보자

 

const stores = useMemo(() => data?.pages.flatMap(page => page.items), [data]);

stores를 메모이징 하여 문제 해결~!~! useStores가 실행되어도 data값이 바뀌지 않았음으로 stores도 바뀌지 않는다!!