This hook uses useLayoutEffect to scroll to an element with a specific ID extracted from the URL, but only after the content has finished loading.

useScrollToElementOnMount.ts

const useScrollToElementOnMount = (loading: boolean) => {
  useLayoutEffect(() => {
    const isDirectLink = !document.referrer
    const hash = window.location.hash
    if (isDirectLink && hash) {
      const elementId = hash.substring(1)
      const element = document.getElementById(elementId)
      if (element && !loading) {
        element.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }, [loading])
}