refactor: converted functions to memos for best practice

Author: eemaanamir

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailContentHistory.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -51,15 +51,15 @@ function BulkEmailContentHistory({ intl }) {
    * up a level (the `subject` field). We also convert the `sent_to` data to be a String rather than an array to fix a
    * display bug in the table.
    */
-  function transformDataForTable() {
+  const transformDataForTable = useMemo(() => {
     const tableData = emailHistoryData?.map((item) => ({
       ...item,
       subject: item.email.subject,
       sent_to: item.sent_to.join(', '),
       created: new Date(item.created).toLocaleString(),
     }));
     return tableData || [];
-  }
+  }, [emailHistoryData]);
 
   /**
    * This function is responsible for setting the current `messageContent` state data. This will be the contents of a
@@ -100,7 +100,7 @@ function BulkEmailContentHistory({ intl }) {
    * contents of a previously sent message.
    */
   const additionalColumns = () => {
-    const tableData = transformDataForTable();
+    const tableData = transformDataForTable;
 
     return [
       {
@@ -137,7 +137,7 @@ function BulkEmailContentHistory({ intl }) {
           {showHistoricalEmailContentTable ? (
             <BulkEmailTaskManagerTable
               errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable()}
+              tableData={transformDataForTable}
               tableDescription={intl.formatMessage(messages.emailHistoryTableViewMessageInstructions)}
               alertWarningMessage={intl.formatMessage(messages.noEmailData)}
               alertErrorMessage={intl.formatMessage(messages.errorFetchingEmailHistoryData)}

src/components/bulk-email-tool/bulk-email-task-manager/BulkEmailTaskHistory.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -41,13 +41,13 @@ function BulkEmailTaskHistory({ intl }) {
     setShowHistoricalTaskContentTable(true);
   }
 
-  function transformDataForTable() {
+  const transformDataForTable = useMemo(() => {
     const tableData = emailTaskHistoryData?.map((item) => ({
       ...item,
       created: new Date(item.created).toLocaleString(),
     }));
     return tableData || [];
-  }
+  }, [emailTaskHistoryData]);
 
   const tableColumns = [
     {
@@ -103,7 +103,7 @@ function BulkEmailTaskHistory({ intl }) {
           {showHistoricalTaskContentTable ? (
             <BulkEmailTaskManagerTable
               errorRetrievingData={errorRetrievingData}
-              tableData={transformDataForTable()}
+              tableData={transformDataForTable}
               alertWarningMessage={intl.formatMessage(messages.noTaskHistoryData)}
               alertErrorMessage={intl.formatMessage(messages.errorFetchingTaskHistoryData)}
               columns={tableColumns}