I have been plagued with this question in my early react days, and it felt too stupid to ask, but I couldn't wait anymore. I understand, virtual DOM is merely an object representation of the DOM in memory, used by react, but this question arose from a discussion along the lines of virtual DOM being an overhead, and bypassing the virtual DOM in react, and straightaway updating the DOM in certain cases. I understand that's an anti-pattern in react, but what does document object really refer to when used in react? Core DOM or Virtual DOM?
PS: this is my first time asking a question on stack overflow. I would really appreciate suggestions on how to better frame questions. Also, my apologies, if this question is too basic for the stackoverflow environment.
The document object is the same as vanilla JavaScript, so it will allow you to access the DOM directly. However, as you note, directly manipulating DOM elements that are controlled by React will likely cause issues down the line. That's where the useRef() hook can be helpful.