useMemo для функции, используемой в операторе .map

Question

Я довольно плохо знаком с хуками, поэтому у меня есть вопрос: у меня в компоненте React есть функция

const getSection = assignmentSectionId => {
    const findSection = sections.find(
      section => section.sectionRefId === assignmentSectionId,
    );

    return findSection ? findSection.name : '';
  };

, и теперь я получил предложение использовать useMemo для этой функции. В настоящее время я использую как:

return (
    <List
      role="list"
      aria-label={ariaLabel}
    >
      {assignments.map(assignment => {
        const sectionName = getSection(assignment.sectionId);

        return (
          <Card
            name={sectionName}
          />
        );
      })}
    </List>
  );
};

Каков наилучший (оптимальный) способ использования useMemo здесь, если это возможно?

Answer 1

Решено таким образом:

const assignmentData = useMemo(() =>
    assignments.map(
      assignment => {
        const matchedSection = sections.find(
          section => section.sectionRefId === assignment.sectionId,
        );
        return {
          sectionName: matchedSection ? matchedSection.name : '',
        };
      },
      [assignments, sections],
    ),
  );


return (
    <List
      role="list"
      aria-label={ariaLabel}
    >
      {assignmentData.map(assignment => {
        return (
          <Card
            name={assignment.sectionName}
          />
        );
      })}
    </List>
  );
};

Answer 2

Вы можете использовать Array#map внутри useMemo. Он только повторно отображает список после assignments изменения значения

const memoList = React.useMemo(()=> assignments.map(assignment => {
        const sectionName = getSection(assignment.sectionId);
        return (<Card  name={sectionName}/>)
      }),[assignments])

return (
    <List role="list" aria-label={ariaLabel}>{memoList}</List>
  );
};