use memo more wisely

components/Blockquote/Blockquote.tsx

@@ -5,10 +5,8 @@ import styles from "./Blockquote.module.css";
 
 type Props = BlockquoteHTMLAttributes<HTMLElement>;
 
-const Blockquote = ({ children, className, ...rest }: Props) => (
+const Blockquote = ({ className, ...rest }: Props) => (
-  <blockquote className={classNames(styles.blockquote, className)} {...rest}>
+  <blockquote className={classNames(styles.blockquote, className)} {...rest} />
-    {children}
-  </blockquote>
 );
 
 export default Blockquote;

components/ColorfulLink/ColorfulLink.tsx

@@ -41,16 +41,7 @@ const getFancyLinkStyles = ({ lightColor, darkColor }: Partial<Props>) => {
   `;
 };
 
-const ColorfulLink = ({
+const ColorfulLink = ({ href, lightColor, darkColor, external = false, className, ...rest }: Props) => {
-  href,
-  title,
-  lightColor,
-  darkColor,
-  external = false,
-  className,
-  children,
-  ...rest
-}: Props) => {
   const { className: underlineClassName, styles: underlineStyles } = getFancyLinkStyles({ lightColor, darkColor });
 
   return (
@@ -58,13 +49,10 @@ const ColorfulLink = ({
       <Link href={href} passHref={true} prefetch={false}>
         <a
           className={classNames(underlineClassName, className)}
-          title={title}
           target={external ? "_blank" : undefined}
           rel={external ? "noopener noreferrer" : undefined}
           {...rest}
-        >
+        />
-          {children}
-        </a>
       </Link>
 
       {underlineStyles}

components/Comments/Comments.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useTheme } from "next-themes";
 import classNames from "classnames";
 import { Giscus } from "@giscus/react";
@@ -28,4 +29,4 @@ const Comments = ({ title, className }: Props) => {
   );
 };
 
-export default Comments;
+export default memo(Comments);

components/Content/Content.tsx

@@ -6,6 +6,6 @@ type Props = {
   children: ReactNode;
 };
 
-const Content = ({ children }: Props) => <div className={styles.content}>{children}</div>;
+const Content = (props: Props) => <div className={styles.content} {...props} />;
 
 export default Content;

components/CopyButton/CopyButton.tsx

@@ -1,9 +1,9 @@
-import { useState, useEffect } from "react";
+import { forwardRef, useState, useEffect } from "react";
 import classNames from "classnames/bind";
 import copy from "copy-to-clipboard";
 import innerText from "react-innertext";
 import { ClipboardOcticon, CheckOcticon } from "../Icons";
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 
 import styles from "./CopyButton.module.css";
 const cx = classNames.bind(styles);
@@ -14,7 +14,10 @@ type Props = {
   className?: string;
 };
 
-const CopyButton = ({ source, timeout = 2000, className }: Props) => {
+const CopyButton = forwardRef(function CopyButton(
+  { source, timeout = 2000, className }: Props,
+  ref: Ref<HTMLButtonElement>
+) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (e) => {
@@ -49,10 +52,11 @@ const CopyButton = ({ source, timeout = 2000, className }: Props) => {
       aria-label="Copy to clipboard"
       onClick={handleCopy}
       disabled={!!copied}
+      ref={ref}
     >
       {copied ? <CheckOcticon fill="currentColor" /> : <ClipboardOcticon fill="currentColor" />}
     </button>
   );
-};
+});
 
 export default CopyButton;

components/Heading/Heading.tsx

@@ -8,44 +8,15 @@ type Props = HTMLAttributes<HTMLHeadingElement> & {
   className?: string;
 };
 
-const Heading = ({ as: Component, children, className, ...rest }: Props) => {
+const Heading = ({ as: Component, className, ...rest }: Props) => {
-  return (
+  return <Component className={classNames(styles.heading, styles[Component], className)} {...rest} />;
-    <Component className={classNames(styles.heading, styles[Component], className)} {...rest}>
-      {children}
-    </Component>
-  );
 };
 
-// TODO: do this less manually...
+export const H1 = (props: Props) => <Heading as="h1" {...props} />;
-export const H1 = ({ children, ...rest }: Props) => (
+export const H2 = (props: Props) => <Heading as="h2" {...props} />;
-  <Heading as="h1" {...rest}>
+export const H3 = (props: Props) => <Heading as="h3" {...props} />;
-    {children}
+export const H4 = (props: Props) => <Heading as="h4" {...props} />;
-  </Heading>
+export const H5 = (props: Props) => <Heading as="h5" {...props} />;
-);
+export const H6 = (props: Props) => <Heading as="h6" {...props} />;
-export const H2 = ({ children, ...rest }: Props) => (
-  <Heading as="h2" {...rest}>
-    {children}
-  </Heading>
-);
-export const H3 = ({ children, ...rest }: Props) => (
-  <Heading as="h3" {...rest}>
-    {children}
-  </Heading>
-);
-export const H4 = ({ children, ...rest }: Props) => (
-  <Heading as="h4" {...rest}>
-    {children}
-  </Heading>
-);
-export const H5 = ({ children, ...rest }: Props) => (
-  <Heading as="h5" {...rest}>
-    {children}
-  </Heading>
-);
-export const H6 = ({ children, ...rest }: Props) => (
-  <Heading as="h6" {...rest}>
-    {children}
-  </Heading>
-);
 
 export default Heading;

components/List/List.tsx

@@ -8,20 +8,14 @@ type Props = {
   className?: string;
 };
 
-export const UnorderedList = ({ children, className, ...rest }: Props) => (
+export const UnorderedList = ({ className, ...rest }: Props) => (
-  <ul className={classNames(styles.unordered, className)} {...rest}>
+  <ul className={classNames(styles.unordered, className)} {...rest} />
-    {children}
-  </ul>
 );
-export const OrderedList = ({ children, className, ...rest }: Props) => (
+export const OrderedList = ({ className, ...rest }: Props) => (
-  <ol className={classNames(styles.ordered, className)} {...rest}>
+  <ol className={classNames(styles.ordered, className)} {...rest} />
-    {children}
-  </ol>
 );
 
 // TODO: this is based on good faith that the children are all `<li>`s...
-export const ListItem = ({ children, className, ...rest }: Props) => (
+export const ListItem = ({ className, ...rest }: Props) => (
-  <li className={classNames(styles.item, className)} {...rest}>
+  <li className={classNames(styles.item, className)} {...rest} />
-    {children}
-  </li>
 );

components/PageTitle/PageTitle.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import classNames from "classnames";
@@ -23,4 +22,4 @@ const PageTitle = ({ children, className }: Props) => {
   );
 };
 
-export default memo(PageTitle);
+export default PageTitle;

components/ThemeToggle/BulbIcon.tsx

@@ -0,0 +1,37 @@
+import { memo } from "react";
+import classNames from "classnames";
+
+type Props = {
+  on?: boolean;
+  className?: string;
+};
+
+// modified from Twemoji lightbulb:
+const BulbIcon = ({ on = false, className }: Props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" className={classNames("icon", className)}>
+    <g fill="none">
+      <path
+        d="m30 11.376c0 6.6229714-5.2272727 7.6515429-5.2272727 13.824 0 3.1865143-3.2649546 3.4549714-5.75 3.4549714-2.1463182 0-6.8853637-.8012571-6.8853637-3.4570285 0-6.1693715-5.1373636-7.1979429-5.1373636-13.8219429 0-6.20331429 5.5252273-11.232 11.5867727-11.232 6.0636364 0 11.4132273 5.02868571 11.4132273 11.232z"
+        fill={on ? "#ffd983" : "#cccbcb"}
+      />
+      <path
+        d="m22.8564091 33.4285714c0 .8516572-2.3355455 2.5714286-4.3564091 2.5714286s-4.3564091-1.7197714-4.3564091-2.5714286c0-.8516571 2.3345-.5142857 4.3564091-.5142857 2.0208636 0 4.3564091-.3373714 4.3564091.5142857z"
+        fill={on ? "#b9c9d9" : "#ccd6dd"}
+      />
+      <path
+        d="m23.4209545 10.5870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0l-3.4426818 3.3870857-3.4426818-3.3870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0-.4087728.4021714-.4087728 1.0522286 0 1.4544l3.8755 3.8129143v10.8884571c0 .5688.4683636 1.0285715 1.0454545 1.0285715s1.0454545-.4597715 1.0454545-1.0285715v-10.8884571l3.8755-3.8129143c.4087728-.4021714.4087728-1.0522286 0-1.4544z"
+        fill={on ? "#ffcc4d" : "#7d7a72"}
+      />
+      <path
+        d="m24.7727273 31.8857143c0 1.1355428-.9367273 2.0571428-2.0909091 2.0571428h-8.3636364c-1.1541818 0-2.0909091-.9216-2.0909091-2.0571428v-6.1714286h12.5454546z"
+        fill="#99aab5"
+      />
+      <path
+        d="m12.2262273 32.9142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828571l12.5454545-2.0571429c.5687273-.1008 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828572l-12.5454545 2.0571428c-.0575.0102857-.1160455.0144-.1725.0144zm0-4.1142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828572l12.5454545-2.0571428c.5687273-.0997714 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828571l-12.5454545 2.0571429c-.0575.0102857-.1160455.0144-.1725.0144z"
+        fill="#ccd6dd"
+      />
+    </g>
+  </svg>
+);
+
+export default memo(BulbIcon);

components/ThemeToggle/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, memo } from "react";
 import { useTheme } from "next-themes";
-import classNames from "classnames";
+import BulbIcon from "./BulbIcon";
 
 import styles from "./ThemeToggle.module.css";
 
@@ -8,41 +8,13 @@ type Props = {
   className?: string;
 };
 
-// modified from Twemoji lightbulb:
-const BulbIcon = ({ on = false, className }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" className={className}>
-    <g fill="none">
-      <path
-        d="m30 11.376c0 6.6229714-5.2272727 7.6515429-5.2272727 13.824 0 3.1865143-3.2649546 3.4549714-5.75 3.4549714-2.1463182 0-6.8853637-.8012571-6.8853637-3.4570285 0-6.1693715-5.1373636-7.1979429-5.1373636-13.8219429 0-6.20331429 5.5252273-11.232 11.5867727-11.232 6.0636364 0 11.4132273 5.02868571 11.4132273 11.232z"
-        fill={on ? "#ffd983" : "#cccbcb"}
-      />
-      <path
-        d="m22.8564091 33.4285714c0 .8516572-2.3355455 2.5714286-4.3564091 2.5714286s-4.3564091-1.7197714-4.3564091-2.5714286c0-.8516571 2.3345-.5142857 4.3564091-.5142857 2.0208636 0 4.3564091-.3373714 4.3564091.5142857z"
-        fill={on ? "#b9c9d9" : "#ccd6dd"}
-      />
-      <path
-        d="m23.4209545 10.5870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0l-3.4426818 3.3870857-3.4426818-3.3870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0-.4087728.4021714-.4087728 1.0522286 0 1.4544l3.8755 3.8129143v10.8884571c0 .5688.4683636 1.0285715 1.0454545 1.0285715s1.0454545-.4597715 1.0454545-1.0285715v-10.8884571l3.8755-3.8129143c.4087728-.4021714.4087728-1.0522286 0-1.4544z"
-        fill={on ? "#ffcc4d" : "#7d7a72"}
-      />
-      <path
-        d="m24.7727273 31.8857143c0 1.1355428-.9367273 2.0571428-2.0909091 2.0571428h-8.3636364c-1.1541818 0-2.0909091-.9216-2.0909091-2.0571428v-6.1714286h12.5454546z"
-        fill="#99aab5"
-      />
-      <path
-        d="m12.2262273 32.9142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828571l12.5454545-2.0571429c.5687273-.1008 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828572l-12.5454545 2.0571428c-.0575.0102857-.1160455.0144-.1725.0144zm0-4.1142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828572l12.5454545-2.0571428c.5687273-.0997714 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828571l-12.5454545 2.0571429c-.0575.0102857-.1160455.0144-.1725.0144z"
-        fill="#ccd6dd"
-      />
-    </g>
-  </svg>
-);
-
 const ThemeToggle = ({ className }: Props) => {
   const [mounted, setMounted] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
   // render a dummy bulb until we're fully mounted and self-aware
   useEffect(() => setMounted(true), []);
-  if (!mounted) return <BulbIcon on={false} className={classNames("icon", className)} />;
+  if (!mounted) return <BulbIcon on={false} className={className} />;
 
   return (
     <button
@@ -51,7 +23,7 @@ const ThemeToggle = ({ className }: Props) => {
       title={resolvedTheme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
       aria-hidden={true}
     >
-      <BulbIcon on={resolvedTheme === "light"} className={classNames("icon", className)} />
+      <BulbIcon on={resolvedTheme === "light"} className={className} />
     </button>
   );
 };

next.config.js

@@ -57,7 +57,6 @@ module.exports = (phase, { defaultConfig }) => {
               loader: "@svgr/webpack",
               options: {
                 icon: true,
-                memo: true,
                 typescript: true,
                 svgProps: {
                   "aria-hidden": true,