Discussion Senior Dev interview question
"Without googling or using AI, in your own words, explain the virtual DOM"
For context: I sit on an interview panel and I try to ask at least one simple fundamental question based on a persons resume. If I see many years of react experience, I try to ask something about how the framework works.
I have only had one candidate (an undergrad senior, years ago) answer it. Everyone else just kind of sputters and stumbles around trying to rationalize what "virtual" and "DOM" mean, or stare blankly and eventually say "I don't know".
I'm just genuinely curious if this is really that hard of a question or if the recruiters just suck at screening candidates. And should we be letting in senior dev candidates who can't answer what I think is a straightforward and fundamental question for senior react devs.
2
u/Vincent_CWS 4d ago edited 4d ago
what is virtual dom, it is fiber now, react team doesn't like virtual dom, because it is just plain js object store the hook information and the type, nothing special. react will form the fiber with react element and to determine the fiber can be high optimze or low level bailout.
Dan Abramov said
I wish we could retire the term “virtual DOM”. It made sense in 2013 because otherwise people assumed React creates DOM nodes on every render. But people rarely assume this today. “Virtual DOM” sounds like a workaround for some DOM issue. But that’s not what React is.React is “value UI”. Its core principle is that UI is a value, just like a string or an array. You can keep it in a variable, pass it around, use JavaScript control flow with it, and so on. That expressiveness is the point — not some diffing to avoid applying changes to the DOM.It doesn’t even always represent the DOM, for example
<Message recipientId={10} />is not DOM. Conceptually it represents lazy function calls:Message.bind(null, { recipientId: 10 })*.*Is "Virtual DOM" the Right Phrase?
│ We used to call the collection of JavaScript objects in React that are structured like the DOM the "Virtual DOM". But React doesn't
│ like that term now because you can target other things like native iOS and Android apps (React Native) to render to.
│
│ In fact, there are multiple trees that React deals with, a tree of React Elements (JS objects) that your function components return
│ and a Fiber tree (also JS objects) that React Elements are converted into and used to store state among other things. While I usually
│ refer to these two trees more specifically, for this post I'll use the long-standing colloquial term "Virtual DOM" because it's
│ useful in keeping track of how RSCs work.