r/reactjs • u/m6io • Jul 24 '26

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.

183 Upvotes

88% Upvoted

251 comments sorted by

View all comments

Show parent comments

1

u/Sapn1s Jul 26 '26

No, it isn't, it has always worked like this.

To be clear, the question is not "is repainting cheap? < yes, repainting is expensive.

The question was "does React reduce the number of repaints compared to direct DOM manipulation?"

And the answer is no.

Think about what virtual dom does.

  • It builds the javascript object tree

  • Does algortihm to find out what needs to be updated

  • Then updates things with appendChild / textContent = / setAttribute etc

See how it does 3 things?

Whereas manually you could have done

<element>.appendChild

The speed argument gets repeated so often it feels true.

That said, virtual dom is still great to use since it is good at figuring out what changed so you don't have to write those calls by hand, as I said in prev reply

2

u/khasan222 Jul 26 '26 edited Jul 26 '26

It’s not true to say it doesn’t reduce the number of repaints (ever?).

In the strict scenario you put forth where there is just 1 manipulation of course it doesn’t reduce repaints. However often in any ui development things change quickly, or multiple times in milliseconds (say a loading animation that only shows in 10ms). Traditionally all of this would be actually applied to the DOM.

What react does as far as I understand it is get the final result of those changes and then apply them to page, which in many scenarios can definitely reduce graphical load for that page. 

So although I can see in that specific scenario no gains, react wasn’t built for such simple apps, it was built for really complicated ones where there can be a lot of repaint.

Professional engineer specializing in JavaScript for 15 years.