NDLANO · Jonas-C · Jul 18, 2023 · Jul 18, 2023 · Jul 19, 2023
diff --git a/src/components/Article/ArticleContents.tsx b/src/components/Article/ArticleContents.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Remarkable } from 'remarkable';
 import { gql } from '@apollo/client';
 import {
@@ -50,9 +50,12 @@ const ArticleContents = ({
     return md;
   }, []);
 
-  const renderMarkdown = (text: string) => {
-    return markdown.render(text);
-  };
+  const renderMarkdown = useCallback(
+    (text: string) => {
+      return markdown.render(text);
+    },
+    [markdown],
+  );
 
   const [article, scripts] = useMemo(() => {
     if (!topic.article) return [undefined, undefined];

diff --git a/src/components/FeideLoginButton/FeideLoginButton.tsx b/src/components/FeideLoginButton/FeideLoginButton.tsx
@@ -71,6 +71,8 @@ const FeideLoginButton = ({ footer, children }: Props) => {
 
   const onClose = useCallback(() => setIsOpen(false), []);
 
+  const onAuthenticateClick = useCallback(() => setIsOpen(true), []);
+
   if (authenticated && !footer) {
     return (
       <StyledLink
@@ -92,7 +94,7 @@ const FeideLoginButton = ({ footer, children }: Props) => {
         <Button
           variant={footer ? 'outline' : 'ghost'}
           colorTheme={footer ? 'greyLighter' : 'lighter'}
-          onClick={() => setIsOpen(true)}
+          onClick={onAuthenticateClick}
           inverted={!footer && ndlaFilm}
           shape={footer ? 'normal' : 'pill'}
         >

diff --git a/src/containers/Masthead/MastheadContainer.tsx b/src/containers/Masthead/MastheadContainer.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import { useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { Masthead, MastheadItem, LanguageSelector, Logo } from '@ndla/ui';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';
@@ -54,7 +54,6 @@ const mastheadQuery = gql`
 
 const MastheadContainer = () => {
   const { t, i18n } = useTranslation();
-  const locale = i18n.language;
   const { subjectId } = useUrnIds();
   const { user } = useContext(AuthContext);
   const { openAlerts, closeAlert } = useAlerts();
@@ -69,21 +68,33 @@ const MastheadContainer = () => {
     skip: !subjectId,
   });
 
-  const data = freshData ?? previousData;
+  const data = useMemo(
+    () => freshData ?? previousData,
+    [freshData, previousData],
+  );
+
+  const alerts = useMemo(
+    () =>
+      openAlerts?.map((alert) => ({
+        content: alert.body || alert.title,
+        closable: alert.closable,
+        number: alert.number,
+      })),
+    [openAlerts],
+  );
 
-  const alerts = openAlerts?.map((alert) => ({
-    content: alert.body || alert.title,
-    closable: alert.closable,
-    number: alert.number,
-  }));
+  const onCloseAlert = useCallback(
+    (id: number) => closeAlert(id),
+    [closeAlert],
+  );
 
   return (
     <ErrorBoundary>
       <Masthead
         fixed
         ndlaFilm={ndlaFilm}
         skipToMainContentId={SKIP_TO_CONTENT_ID}
-        onCloseAlert={(id) => closeAlert(id)}
+        onCloseAlert={onCloseAlert}
         messages={alerts}
       >
         <MastheadItem left>
@@ -112,7 +123,7 @@ const MastheadContainer = () => {
           <MastheadSearch subject={data?.subject} hideOnNarrowScreen />
           <Logo
             to="/"
-            locale={locale}
+            locale={i18n.language}
             label={t('logo.altText')}
             cssModifier={ndlaFilm ? 'white' : ''}
           />

diff --git a/src/containers/Masthead/drawer/MastheadDrawer.tsx b/src/containers/Masthead/drawer/MastheadDrawer.tsx
@@ -13,7 +13,7 @@ import { spacing } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';
 import { Drawer } from '@ndla/modal';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GQLMastheadDrawer_SubjectFragment } from '../../../graphqlTypes';
 import { useIsNdlaFilm, useUrnIds } from '../../../routeHelpers';
@@ -91,6 +91,22 @@ const MastheadDrawer = ({ subject }: Props) => {
     }
   }, [topicPath, type]);
 
+  const activateButton = useMemo(() => {
+    return (
+      <ButtonV2
+        aria-haspopup="menu"
+        inverted={ndlaFilm}
+        shape="pill"
+        variant="outline"
+        data-testid="masthead-menu-button"
+        aria-label={t('masthead.menu.title')}
+      >
+        <Menu />
+        {t('masthead.menu.button')}
+      </ButtonV2>
+    );
+  }, [ndlaFilm, t]);
+
   return (
     <Drawer
       expands
@@ -99,19 +115,7 @@ const MastheadDrawer = ({ subject }: Props) => {
       animationDuration={100}
       animation="slideIn"
       aria-label={t('masthead.menu.modalLabel')}
-      activateButton={
-        <ButtonV2
-          aria-haspopup="menu"
-          inverted={ndlaFilm}
-          shape="pill"
-          variant="outline"
-          data-testid="masthead-menu-button"
-          aria-label={t('masthead.menu.title')}
-        >
-          <Menu />
-          {t('masthead.menu.button')}
-        </ButtonV2>
-      }
+      activateButton={activateButton}
     >
       {(close) => (
         <MainMenu>

diff --git a/src/containers/Page/components/Footer.tsx b/src/containers/Page/components/Footer.tsx
@@ -15,60 +15,71 @@ import {
   Youtube,
 } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
+import { memo, useMemo } from 'react';
 import { supportedLanguages } from '../../../i18n';
 
 const FooterWrapper = () => {
   const { t, i18n } = useTranslation();
 
-  const links = [
-    {
-      to: 'https://www.facebook.com/ndla.no',
-      text: t('footer.socialMediaLinks.facebook'),
-      icon: <Facebook />,
-    },
-    {
-      to: 'https://instagram.com/ndla_no/',
-      text: t('footer.socialMediaLinks.instagram'),
-      icon: <Instagram />,
-    },
-    {
-      to: 'https://www.linkedin.com/company/ndla/',
-      text: t('footer.socialMediaLinks.linkedin'),
-      icon: <LinkedIn />,
-    },
-    {
-      to: 'https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA',
-      text: t('footer.socialMediaLinks.youtube'),
-      icon: <Youtube />,
-    },
-    {
-      to: 'https://om.ndla.no/nyhetsbrev/',
-      text: t('footer.socialMediaLinks.newsletter'),
-      icon: <EmailOutline />,
-    },
-  ];
+  const links = useMemo(
+    () => [
+      {
+        to: 'https://www.facebook.com/ndla.no',
+        text: t('footer.socialMediaLinks.facebook'),
+        icon: <Facebook />,
+      },
+      {
+        to: 'https://instagram.com/ndla_no/',
+        text: t('footer.socialMediaLinks.instagram'),
+        icon: <Instagram />,
+      },
+      {
+        to: 'https://www.linkedin.com/company/ndla/',
+        text: t('footer.socialMediaLinks.linkedin'),
+        icon: <LinkedIn />,
+      },
+      {
+        to: 'https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA',
+        text: t('footer.socialMediaLinks.youtube'),
+        icon: <Youtube />,
+      },
+      {
+        to: 'https://om.ndla.no/nyhetsbrev/',
+        text: t('footer.socialMediaLinks.newsletter'),
+        icon: <EmailOutline />,
+      },
+    ],
+    [t],
+  );
+
+  const privacyLinks = useMemo(
+    () => [
+      { url: 'https://om.ndla.no/gdpr', label: t('footer.privacyLink') },
+      { url: 'https://om.ndla.no/cookies', label: t('footer.cookiesLink') },
+      {
+        url: 'https://uustatus.no/nn/erklaringer/publisert/8cefdf3d-3272-402a-907b-689ddfc9bba7',
+        label: t('footer.availabilityLink'),
+      },
+    ],
+    [t],
+  );
 
-  const privacyLinks = [
-    { url: 'https://om.ndla.no/gdpr', label: t('footer.privacyLink') },
-    { url: 'https://om.ndla.no/cookies', label: t('footer.cookiesLink') },
-    {
-      url: 'https://uustatus.no/nn/erklaringer/publisert/8cefdf3d-3272-402a-907b-689ddfc9bba7',
-      label: t('footer.availabilityLink'),
-    },
-  ];
+  const languageSelector = useMemo(
+    () => (
+      <LanguageSelector
+        inverted
+        locales={supportedLanguages}
+        onSelect={i18n.changeLanguage}
+      />
+    ),
+    [i18n],
+  );
 
   return (
     <Footer
       lang={i18n.language}
-      //@ts-ignore Wrongly typed as an array with a single element in frontend-packages.
       links={links}
-      languageSelector={
-        <LanguageSelector
-          inverted
-          locales={supportedLanguages}
-          onSelect={i18n.changeLanguage}
-        />
-      }
+      languageSelector={languageSelector}
       privacyLinks={privacyLinks}
     >
       <FooterText>
@@ -79,4 +90,4 @@ const FooterWrapper = () => {
   );
 };
 
-export default FooterWrapper;
+export default memo(FooterWrapper);
diff --git a/src/containers/SubjectPage/SubjectContainer.tsx b/src/containers/SubjectPage/SubjectContainer.tsx
@@ -7,7 +7,7 @@
  */
 
 import { gql } from '@apollo/client';
-import { useState, createRef, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Helmet } from 'react-helmet-async';
 import {
   constants,
@@ -101,26 +101,28 @@ const SubjectContainer = ({ t, topicIds, subject }: Props) => {
     setTopicCrumbs((crumbs) => crumbs.slice(0, topicIds.length));
   }, [topicIds.length]);
 
-  const breadCrumbs: SimpleBreadcrumbItem[] = [
-    {
-      name: t('breadcrumb.toFrontpage'),
-      to: '/',
-    },
-    {
-      to: `${removeUrn(subject.id)}`,
-      name: subject.name,
-    },
-    ...topicCrumbs,
-  ].reduce<SimpleBreadcrumbItem[]>((crumbs, crumb) => {
-    crumbs.push({
-      name: crumb.name,
-      to: `${crumbs[crumbs.length - 1]?.to ?? ''}${crumb.to}`,
-    });
+  const breadCrumbs: SimpleBreadcrumbItem[] = useMemo(
+    () =>
+      [
+        {
+          name: t('breadcrumb.toFrontpage'),
+          to: '/',
+        },
+        {
+          to: `${removeUrn(subject.id)}`,
+          name: subject.name,
+        },
+        ...topicCrumbs,
+      ].reduce<SimpleBreadcrumbItem[]>((crumbs, crumb) => {
+        crumbs.push({
+          name: crumb.name,
+          to: `${crumbs[crumbs.length - 1]?.to ?? ''}${crumb.to}`,
+        });
 
-    return crumbs;
-  }, []);
-
-  const topicRefs = topicIds.map((_) => createRef<HTMLDivElement>());
+        return crumbs;
+      }, []),
+    [subject.id, subject.name, t, topicCrumbs],
+  );
 
   const moveBannerUp = !topicIds?.length;
 
@@ -165,6 +167,14 @@ const SubjectContainer = ({ t, topicIds, subject }: Props) => {
     t,
   );
 
+  const competenceGoals = useMemo(() => {
+    if (subject.grepCodes?.length) {
+      return (
+        <CompetenceGoals codes={subject.grepCodes} subjectId={subject.id} />
+      );
+    } else return undefined;
+  }, [subject.grepCodes, subject.id]);
+
   return (
     <main>
       <Helmet>
@@ -182,16 +192,7 @@ const SubjectContainer = ({ t, topicIds, subject }: Props) => {
             imageUrl={socialMediaMetadata.image?.url}
             trackableContent={{ supportedLanguages }}
           />
-          <ArticleHeaderWrapper
-            competenceGoals={
-              subject.grepCodes?.length ? (
-                <CompetenceGoals
-                  codes={subject.grepCodes}
-                  subjectId={subject.id}
-                />
-              ) : undefined
-            }
-          >
+          <ArticleHeaderWrapper competenceGoals={competenceGoals}>
             <BreadcrumbWrapper>
               <HomeBreadcrumb light={ndlaFilm} items={breadCrumbs} />
             </BreadcrumbWrapper>
@@ -215,7 +216,6 @@ const SubjectContainer = ({ t, topicIds, subject }: Props) => {
           <SubjectPageContent
             subject={subject}
             topicIds={topicIds}
-            refs={topicRefs}
             setBreadCrumb={setTopicCrumbs}
           />
         </LayoutItem>