better use effects

Author: mydea

src/components/alert/index.tsx renamed to src/components/alert.tsx

@@ -5,7 +5,7 @@ import {
   InfoCircledIcon,
 } from '@radix-ui/react-icons';
 
-import {Callout} from '../callout';
+import {Callout} from './callout';
 
 type AlertProps = {
   children?: ReactNode;

src/components/callout/index.tsx

@@ -1,4 +1,9 @@
-import {ForwardRefExoticComponent, MouseEventHandler, ReactNode} from 'react';
+import {
+  ForwardRefExoticComponent,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+} from 'react';
 
 // explicitly not usig CSS modules here
 // because there's some prerendered content that depends on these exact class names
@@ -24,6 +29,19 @@ function Header({
   id?: string;
   onClick?: MouseEventHandler;
 }) {
+  // We want to avoid actually triggering the link
+  const preventDefaultOnClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (!onClick) {
+        return;
+      }
+
+      event.preventDefault();
+      onClick(event);
+    },
+    [onClick]
+  );
+
   if (!id) {
     return (
       <h5
@@ -36,17 +54,9 @@ function Header({
     );
   }
 
-  // We want to avoid actually triggering the link
-  const wrappedOnClick = onClick
-    ? (event: React.MouseEvent) => {
-        event.preventDefault();
-        onClick(event);
-      }
-    : undefined;
-
   return (
     <h5 className="callout-header" id={id}>
-      <a href={'#' + id} onClick={wrappedOnClick}>
+      <a href={'#' + id} onClick={preventDefaultOnClick}>
         {title}
       </a>
     </h5>

src/components/expandable.tsx

@@ -22,13 +22,13 @@ function slugify(str: string) {
 export function Expandable({title, level, children, permalink}: Props) {
   const id = permalink ? slugify(title) : undefined;
 
-  const defaultIsExpanded = id && window.location.hash === `#${id}`;
-  const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   // Ensure we scroll to the element if the URL hash matches
   useEffect(() => {
     if (id && window.location.hash === `#${id}`) {
       document.querySelector(`#${id}`)?.scrollIntoView();
+      setIsExpanded(true);
     }
 
     // When the hash changes (e.g. when the back/forward browser buttons are used),