Con React estoy dentro de un repositorio, y los elementos HTML se están cargando desde otro repositorio, que observo usando pageLoaded. Dentro de updateHeader solo hay más selección de elementos HTML y manipulación de atributos/clases.

 useEffect(() => { if (pageLoaded.status) { if (someCondition) { updateHeader(ubeName); } else { document.querySelector('.headerbar-menu').style.display = 'block'; if (document.querySelector('.headerbar-menu.affiliates-wrapper')) { document.querySelector('.headerbar-menu.affiliates-wrapper').style.display = 'none'; } } } }, [pageLoaded.status])

El problema aquí es, obviamente, que no deberíamos usar querySelector, y creo que puede estar causando alguna funcionalidad inesperada. Los elementos no se evalúan y renderizan correctamente hasta que alguna parte del estado cambia, es decir, un controlador de estado de desplazamiento, por lo que en la carga de la página inicial los elementos no se muestran con sus nuevos atributos hasta que se desplaza.

Me gustaría intentar resolver usando useRef, pero no tengo acceso directo al html. ¿Hay alguna forma de conectar dinámicamente una referencia a un elemento sin acceso al código HTML?

¡Gracias por su tiempo y atención!