Repository: supabase/supabase
File: apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx (TypeScript)

Code before:
})

const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
  const pathname = usePathname()
  const { resolvedTheme } = useTheme()
  const activeItem = props.subItem.url === pathname
  const activeItemRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null)
  const hasSubItems = props.subItem.items && props.subItem.items.length > 0

  const setActiveItemRef = React.useCallback(
    (element: HTMLButtonElement | HTMLAnchorElement | null) => {
      if (activeItemRef.current !== element) {
        ;(
          activeItemRef as React.MutableRefObject<HTMLButtonElement | HTMLAnchorElement | null>
        ).current = element
      }
      if (activeItem && element) {
        setTimeout(() => {
          element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
        }, 0)
      }
    },
    [activeItem]
  )

  const LinkContainer = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, any>(
    (props, ref) => {
      const isExternal = props.url.startsWith('https://')

      if (hasSubItems) {
        return (
          <Accordion.Trigger
            className={props.className}
            ref={ref as React.ForwardedRef<HTMLButtonElement>}
          >
            {props.children}
          </Accordion.Trigger>
        )
      }

      return (
        <Link
          href={props.url}
          className={props.className}
          target={isExternal ? '_blank' : undefined}
          rel={isExternal ? 'noopener noreferrer' : undefined}
          ref={ref as React.ForwardedRef<HTMLAnchorElement>}
        >
          {props.children}
        </Link>
      )

Review comment (refactor):
let's move this out into an independent component, it'll be redefined (and be unmounted and remounted) on every render otherwise

Code after:
})

const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any) {
  const pathname = usePathname()
  const { resolvedTheme } = useTheme()
  const activeItem = props.subItem.url === pathname
  const activeItemRef = useRef<HTMLLIElement>(null)

  const isChildActive =
    props.subItem.items && props.subItem.items.some((child: any) => child.url === pathname)

  const LinkContainer = (props) => {
    const isExternal = props.url.startsWith('https://')

    return (
      <Link
        href={props.url}
        className={props.className}
        target={isExternal ? '_blank' : undefined}
        rel={isExternal ? 'noopener noreferrer' : undefined}
      >
        {props.children}
      </Link>
    )
  }

  useEffect(() => {
    // scroll to active item
    if (activeItem && activeItemRef.current) {
      // this is a hack, but seems a common one on Stackoverflow
      setTimeout(() => {
        activeItemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
      }, 0)
    }
  })
  return (
    <>
      {props.subItemIndex === 0 && (
        <>
          <div className="h-px w-full bg-border my-3"></div>
          <span className="font-mono text-xs uppercase text-foreground font-medium tracking-wider">
            {props.parent.name}
          </span>
        </>
      )}
      {props.subItem.items && props.subItem.items.length > 0 ? (
        <Accordion.Root
          collapsible
          type="single"
          className="space-y-0.5"
          defaultValue={isChildActive ? props.subItem.url : undefined}