React Hooks - Using useRef without direct access to HTML Element Code?

Question

With React I'm inside of one repository, and the HTML elements are loading from another repo, which I watch for using pageLoaded. Inside updateHeader there is just more HTML element selecting and attribute/class manipulation.

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])

The problem here is obviously we shouldn't be using querySelector, and i think it may be causing some unexpected functionality. The elements dont properly evaluate and render until some piece of state changes i.e. a scroll state handler, so on initial page load the elements dont show with their new attributes until a scroll.

I'd like to attempt to resolve using useRef, but don't have direct access to the html. Is there a way to dynamically connect a ref to an element without access to the HTML code?

Thanks for your time and attention!

Answer 1

The best way to do this, in my opinion, is in this sequence:

1. Attempt to select the element
2. If non-existant, set up a DOMSubtreeModified event handler or a MutationObserver
3. Clean up DOMSubtreeModified event handler or a MutationObserver (or keep it around to watch for updates)

This allows for use of query selectors in a safe and modern way which doesn't stray too far from React's recommendations