Tengo enlaces de la siguiente manera:

 www.foo.com/#my_hash

El problema es que cuando el usuario ingresa esto, el hash no se desplaza ni se accede a él. Mi trabajo temporal fue usar un método personalizado, que espera 4 segundos para desplazarse manualmente.

 client.scrollToHash = function(delay = 0, offset = 0) { window.setTimeout(() => { const hash = document.location.hash.slice(1); if(!hash) { return; } const element = document.getElementById(hash); if(!element) { return; } window.scrollTo({ top: element.getBoundingClientRect().top - offset, behavior: 'smooth' }); }, delay); };

¿Es posible detectar algo como un evento de carga desde el DOM nativo, en lugar de usar un tiempo de espera?

Estoy usando componentes funcionales.

¿Los componentes funcionales de reacción tienen una manera fácil de hacerle saber que el componente se ha renderizado?

Estoy confundido sobre cómo funcionan los hashes de anclaje en general, ya que si provienen del usuario/navegador, siempre habrá un retraso, ya que la página tarda en cargarse.

Preferiría no usar otra biblioteca, pero lograr esto usando la funcionalidad DOM o React si es posible.

¿Se puede lograr esto usando useEffect()?