# 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,
TableRow,
TableCell,
TableBody,
Button,
} from '@material-ui/core';
import { useQuery } from 'react-apollo-hooks';

import Container from '../../../components/Container';
import { useAuth } from '../../../auth/index';
import { RouteComponentProps, NavigateFn } from '@reach/router';

return useMemo(() => {
if (!data) {
return '';
}
return {
await navigate(/list/\${grade.gradeId});
},
};
});
}, [data, navigate]);
}

const tenantId =
useAuth().tenantIds[0] || 'c96bcd70-70bc-4e66-b47d-88a066912a77';
variables: {
tenantId,
},

}

return (
<Container>
<Paper style={{ width: '100%' }}>
<Table style={{ width: '100%' }}>
<TableRow>
<TableCell>#</TableCell>
<TableCell>Acción</TableCell>
</TableRow>
<TableBody>
{!!mappedData &&
<TableCell>{index + 1}</TableCell>
<TableCell>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
</Container>
);
}



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

• I think it should work. Does it work? – Dima Tisnek Jun 12 '19 at 3:18
• It does!! No issues so far. – Jose A Jun 12 '19 at 11:09
• Yes, I think this extraction is completely valid, in similar extraction is also used authoritatively: usehooks.com – Dima Tisnek Jun 13 '19 at 1:43
• Awesome, thanks! I already extracted it and so far no es-lint issues or functionality break. I'm more concerned about the parameters that the function needs to be executed mroe than anything – Jose A Jun 13 '19 at 2:51