1
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ I think it should work. Does it work? \$\endgroup\$ – Dima Tisnek Jun 12 at 3:18
  • \$\begingroup\$ It does!! No issues so far. \$\endgroup\$ – Jose A Jun 12 at 11:09
  • 1
    \$\begingroup\$ Yes, I think this extraction is completely valid, in similar extraction is also used authoritatively: usehooks.com \$\endgroup\$ – Dima Tisnek Jun 13 at 1:43
  • 1
    \$\begingroup\$ 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 \$\endgroup\$ – Jose A Jun 13 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.