Add memo to components

Add suspense for dynamic import

components/mdx/Anchor.tsx

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, forwardRef } from 'react';
+import { AnchorHTMLAttributes, forwardRef, memo } from 'react';
 import clsx from 'clsx';
 import { FiExternalLink } from 'react-icons/fi';
 
@@ -33,6 +33,7 @@ const Anchor = forwardRef<HTMLAnchorElement, Props>(
     );
   }
 );
+
 Anchor.displayName = 'Anchor';
 
-export default Anchor;
+export default memo(Anchor);

components/mdx/Image.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import NextImage, { ImageProps } from 'next/image';
+import { memo } from 'react';
 
 interface Props extends ImageProps {}
 
@@ -18,4 +19,4 @@ const Image = ({ alt, ...rest }: Props) => {
   );
 };
 
-export default Image;
+export default memo(Image);

components/mdx/LinkAnchor.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode } from 'react';
+import { memo, ReactNode } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 
 interface Props {
@@ -26,4 +26,4 @@ const Anchor = ({ children, external = true }: Props) => {
   );
 };
 
-export default Anchor;
+export default memo(Anchor);

components/mdx/Pre.tsx

@@ -1,8 +1,13 @@
 import clsx from 'clsx';
+import CopyButton from 'components/post/CopyButton';
 import useCopyToClipboard from 'lib/hooks/useCopyToClipboard';
-import { DetailedHTMLProps, HTMLAttributes, lazy, useRef } from 'react';
-
-const CopyButton = lazy(() => import('components/post/CopyButton'));
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  memo,
+  useCallback,
+  useRef,
+} from 'react';
 
 type Props = {} & DetailedHTMLProps<
   HTMLAttributes<HTMLPreElement>,
@@ -14,11 +19,11 @@ const Pre = ({ ...rest }: Props) => {
 
   const preRef = useRef<HTMLPreElement>(null);
   const { copy } = useCopyToClipboard();
-  const handleCopy = () => {
+  const handleCopy = useCallback(() => {
     if (!preRef.current) throw new Error('Can not access pre element.');
     if (preRef.current.textContent == null) return;
     copy(preRef.current.textContent);
-  };
+  }, [copy]);
 
   return (
     <>
@@ -34,4 +39,4 @@ const Pre = ({ ...rest }: Props) => {
   );
 };
 
-export default Pre;
+export default memo(Pre);