Does React (hooks) require the use of states in order to do its virtual dom diff magic?

Question

This always puzzled me. If I said "Thank you React, your state hooks are awesome, but I'm just gonna do my direct dom manipulation here", would react still do the virtual dom comparison in order to update only that specific item? would I still benefit from the virtual dom 'situation'?

Is there any difference between using react to directly manipulate dom without states, and using a standard HTML file with imported vanilla js code?

For clarity, here's an example, Let's say I have function printHellol() triggered by a button 'click' in my JSX. The function targets the ID of an element and changes the text content.

I couldn't find the answer anywhere. Thanks!

Answer 1

Anything that his held in state becomes part of an object that react renders as a detached element from the dom. It's in essence creating a separate environment for all states. Anything that is used outside of state can be considered to be part of the direct dom object, causing the page to be rerendered when updates occur. In other words you would need to use the react specific state if you want to access the virtual dom specific environment.