useMemo being called without any change in dependency

Question

I am using React 17 and trying to move some redux data to react query.

One of the common functionality in redux is to massage the api data and store it for all the consumers.

I am trying to replicate the same functionality via react query. If the api call is successful the 1st time - I want to massage the data returned by the api and save it in useMemo

function massageCategoriesData(data){
// ...some computation here...
}

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    () => api.fetchCategories(),
    { staleTime: Infinity, cacheTime: Infinity },
  );

  const { data, isSuccess } = query;

  const finalData = useMemo(() => {
    if (isSuccess) {
      return massageCategoriesData(data);
    }
    return null;
  }, [query.isSuccess]);

  return {
    query,
    data: finalData,
  };
};

But the problem is, when I'm calling useDataCategories from components which are getting unmounted and mounted again and again - the massaging is happening everytime and useMemo is not working..

I tried to read the official docs and here's what they say:

Please help! Is the behavior of useMemo dependent on other things as well ?

If your component is getting unmounted and remounted, it's a new component... useMemo will always rerun. — Justin Taddei, Sep 16 '22 at 06:48
verified that using this codesandbox @JustinTaddei but then how to massage data and store it globally using react query — Probosckie, Sep 16 '22 at 07:08

score 0 · Answer 1 · answered Sep 18 '22 at 07:38

You would likely want to do that inside the queryFn itself:

const useDataCategories = () => {
  const query = useQuery(
    ['categories'],
    async () => {
      const data = await api.fetchCategories()
      return massageCategoriesData(data)
    }
    { staleTime: Infinity, cacheTime: Infinity },
  );

I've written in detail about the different approaches and their tradeoffs here: https://tkdodo.eu/blog/react-query-data-transformations

useMemo being called without any change in dependency

1 Answers1