How to reduce the number of recalculations of the same params passed to the hook that is used in many places?

[PetrovaDaria]

I have a general query hook that fetches data and a wrapper hook over him for specific form. Wrapper hook generates params from form values and translates result to query hook arguments. This wrapper hook is used in many places in the form (real number is 16 times). And therefore it N times does the same transformations with params.
The question is - how to reduce the generation of params from N times to 1 time?

type TUseQueryIntersectionsParams = {
  inn: string;
  phones: string[];
  emails: string[];
}

const fetchIntersections = (params: TUseQueryIntersectionsParams) => {
  // some fetching function
}

// general hook for fetching intersections
export const useQueryIntersections = (
  params: TUseQueryIntersectionsParams,
) => {
  return useQuery<DetailedIntersectionModel[], JSONRPCError>(
    ["intersections", params],
    () => fetchIntersections(params),
  );
};

// hook that generates params for general query hook from specific form values
export const useFormIntersectionsParams = (): TUseQueryIntersectionsParams  => {
   // for this form we use Formik but there can be any form library
   const {
    values: { inn, phones, emails },
  } = useFormikContext<FullPreLeadModel>();

  // these transformations are executed a lot of times with the same data 
  // which is meaningless and I want to avoid it
  const formattedInn = formatInn(inn);
  const formattedPhones = formatPhones(phones);
  const formattedEmails = formatEmails(emails);

   return {
      inn: formattedInn,
      phones: formattedPhones,
      emails: formattedEmails
   }
}

// hook for fetching intersections for specific form
// it is used in many places, real number is 16 different places
export const useQuerySomeFormIntersections = () => {
   // generating of params (getting values from form provider, transforming to params) is executed 16 times
   const params = useFormIntersectionsParams();
   return useQueryIntersections(params);
}

// in reality it is way more complex, the form has a lot of nested components 
// and some of them in absolutely different places in tree use this hook
const Form = () => {
  return (
     <>
         <Subform1/>
         <Subform2/>
     </>
  )
}

const Subform1 = () => {
   const { data } = useQuerySomeFormIntersections();
   return (
      <></>
   )
}

const Subform2 = () => {
   const { data } = useQuerySomeFormIntersections();
   return (
      <></>
   )
}

[louis-young]

Hi 👋

You can use useMemo here to cache the formatted fields.

https://react.dev/reference/react/useMemo