Extract useMemo to its own custom hook

I wanted to know if the useMemo function extracted like this is valid at all. This is a whole component (Sorry for the imports) that uses useMemo to get a data that is grabbed from the server using GraphQL and react-apollo-hooks.

I extracted the useMemo to prevent bloat in the actual component.

/**  * The list of grades that the teacher needs to choose first.  */  import React, { useMemo, memo } from 'react'; import {   Paper,   Table,   TableHead,   TableRow,   TableCell,   TableBody,   Button, } from '@material-ui/core'; import { useQuery } from 'react-apollo-hooks';  import Container from '../../../components/Container'; import { GET_ALL_GRADES, Grades } from '../../../graphql/grades'; import { useAuth } from '../../../auth/index'; import { RouteComponentProps, NavigateFn } from '@reach/router';  function useGradesData(data: Grades[], navigate: NavigateFn) {   return useMemo(() => {     if (!data) {       return '';     }     return data.map(grade => {       return {         async listSubjectFromGrades() {           await navigate(`/list/$  {grade.gradeId}`);         },         ...grade,       };     });   }, [data, navigate]); }  function Grade(props: RouteComponentProps) {   const tenantId =     useAuth().tenantIds[0] || 'c96bcd70-70bc-4e66-b47d-88a066912a77';   const { data, loading } = useQuery(GET_ALL_GRADES, {     variables: {       tenantId,     },   }) as { data: Grades[]; loading: boolean };    const mappedData = useGradesData(data, props.navigate!);    if (loading) {     return <p>Loading</p>;   }    return (     <Container>       <Paper style={{ width: '100%' }}>         <Table style={{ width: '100%' }}>           <TableHead>             <TableRow>               <TableCell>#</TableCell>               <TableCell>Nombre del Grado</TableCell>               <TableCell>Acción</TableCell>             </TableRow>           </TableHead>           <TableBody>             {!!mappedData &&               mappedData.map((grade, index) => (                 <TableRow key={grade.gradeId}>                   <TableCell>{index + 1}</TableCell>                   <TableCell>{grade.name}</TableCell>                   <TableCell>                     <Button onClick={grade.listSubjectFromGrades}>Ver</Button>                   </TableCell>                 </TableRow>               ))}           </TableBody>         </Table>       </Paper>     </Container>   ); }  export default memo(Grade); 

In addition, you are more than welcome to spot any other improvements in the whole code.