javascript – Extract useMemo to your own personalized hook

I wanted to know if the useMemo function extracted in this way is valid at all. This is a complete component (forgiveness for imports) used by useMemo to obtain data that is extracted from the server through GraphQL and react-apollo-hooks.

I extracted the useMemo to avoid swelling in the real component.

/ **
* The list of qualifications that the teacher must choose first.
* /

import React, {useMemo, memo} from & # 39; react & # 39 ;;
to import {
Paper,
Table,
Tablehead,
Row of the table,
TableCell,
TableBody,
Button,
} from & # 39; @ material-ui / core & # 39 ;;
import {useQuery} from & # 39; react-apollo-hooks & # 39 ;;

import the container from & # 39; ../../../ components / Container & # 39 ;;
import {GET_ALL_GRADES, Qualifications} from & # 39; ../../../ graphql / grades & # 39 ;;
import {useAuth} from & # 39; ../../../ auth / index & # 39 ;;
amount {RouteComponentProps, NavigateFn} from & # 39; @ reach / router & # 39 ;;

UseGradesData function (data: Qualifications[], navigate: NavigateFn) {
returns useMemo (() => {
yes (! data) {
return & # 39; & # 39 ;;
}
returns data.map (grade => {
he came back {
async listSubjectFromGrades () {
wait to navigate (`/ list / $ {grade.gradeId}`);
}
...grade,
};
});
} [data, navigate]);
}

Grade function (props: RouteComponentProps) {
const tenantId =
useAuth (). tenantIds[0] || & # 39; c96bcd70-70bc-4e66-b47d-88a066912a77 & # 39 ;;
const {data, loading} = useQuery (GET_ALL_GRADES, {
variables: {
tenant
}
}) as {data: qualifications[]; loading: boolean};

const mappedData = useGradesData (data, props.navigate!);

if (loading) {
he came back 

Loading

; } he came back ( # Name of the Degree Action {!! mappedData && mappedData.map ((degree, index) => ( {index + 1} {grade.name} ))}
); } export by default memo (Grade);

In addition, we invite you to detect any other improvement in the entire code.