useCallback

Author: chargome

src/components/expandable/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {ReactNode, useEffect, useRef, useState} from 'react';
+import {ReactNode, useCallback, useEffect, useRef, useState} from 'react';
 import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/nextjs';
 
@@ -66,49 +66,52 @@ export function Expandable({
     };
   }, [id]);
 
-  async function copyContentOnClick(event: React.MouseEvent<HTMLButtonElement>) {
-    event.stopPropagation(); // Prevent the details element from toggling
-    event.preventDefault(); // Prevent default summary click behavior
+  const copyContentOnClick = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation(); // Prevent the details element from toggling
+      event.preventDefault(); // Prevent default summary click behavior
 
-    if (contentRef.current === null) {
-      return;
-    }
+      if (contentRef.current === null) {
+        return;
+      }
 
-    // Attempt to get text from markdown code blocks if they exist
-    const codeBlocks = contentRef.current.querySelectorAll('code');
-    let contentToCopy = '';
-
-    if (codeBlocks.length > 0) {
-      // If there are code blocks, concatenate their text content
-      codeBlocks.forEach(block => {
-        // Exclude code elements within other code elements (e.g. inline code in a block)
-        if (!block.closest('code')?.parentElement?.closest('code')) {
-          contentToCopy += (block.textContent || '') + '\n';
-        }
-      });
-      contentToCopy = contentToCopy.trim();
-    }
+      // Attempt to get text from markdown code blocks if they exist
+      const codeBlocks = contentRef.current.querySelectorAll('code');
+      let contentToCopy = '';
+
+      if (codeBlocks.length > 0) {
+        // If there are code blocks, concatenate their text content
+        codeBlocks.forEach(block => {
+          // Exclude code elements within other code elements (e.g. inline code in a block)
+          if (!block.closest('code')?.parentElement?.closest('code')) {
+            contentToCopy += (block.textContent || '') + '\n';
+          }
+        });
+        contentToCopy = contentToCopy.trim();
+      }
 
-    // Fallback to the whole content if no code blocks or if they are empty
-    if (!contentToCopy && contentRef.current.textContent) {
-      contentToCopy = contentRef.current.textContent.trim();
-    }
+      // Fallback to the whole content if no code blocks or if they are empty
+      if (!contentToCopy && contentRef.current.textContent) {
+        contentToCopy = contentRef.current.textContent.trim();
+      }
 
-    if (!contentToCopy) {
-      // if there is no content to copy (e.g. only images), do nothing.
-      return;
-    }
+      if (!contentToCopy) {
+        // if there is no content to copy (e.g. only images), do nothing.
+        return;
+      }
 
-    try {
-      setCopied(false);
-      await navigator.clipboard.writeText(contentToCopy);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1200);
-    } catch (error) {
-      Sentry.captureException(error);
-      setCopied(false);
-    }
-  }
+      try {
+        setCopied(false);
+        await navigator.clipboard.writeText(contentToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+      } catch (error) {
+        Sentry.captureException(error);
+        setCopied(false);
+      }
+    },
+    []
+  );
 
   function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
     const newVal = event.currentTarget.open;