I have experiencing on both complex React projects and complex vanilla JS projects (think the scale and complexity of Figma). Vanilla JS lends itself to being more performant. Anything that happens in Vanilla JS happens for an explicit, developer-defined reason. Things don’t rerender unless explicitly asked to. This can be both good and bad. While Vanilla JS tends to stay way more performant as complexity scales, “stale state” bugs are much more common. It’s a tradeoff.
I had the exact opposite experience. I mean, first of all, people using "VanillaJS" get the DOM manipulation wrong a lot more often. And then I do hope you don't conflate code size with complexity, because of course, direct DOM manipulation takes one heck of a lot more code (unless you create and maintain your own bespoke framework creating your own headaches). You are basically contradicting the whole reason Facebook, a pretty big and quite smart company, started React in the first place.
You also don't seem to understand what "rerendering" means. And that is often a problem in terms of performance. A React component only executes to determine if things have to be changed in the DOM. Not understanding this is creates a lot of pain.
As I said, this project was about as complex as Figma: a feature rich collaborative editor. This designation has nothing to do with code size.
Go hook up the React dev tools to Reddit and look how much each component renders. You see that components are constantly rendering even though nothing apparent has changed. I get that ideally React would only re-render when something has changed, but clearly it’s easy to create situations where react thinks something has changed even if it hasn’t.
Another good example is the Facebook website itself. It’s just so slow. I get saying Reddit developers suck, but I don’t think you can say the same about FB developers given that FB made React. React is popular because it’s a good developer experience. It’s not the best choice if you want optimal performance.
Yes, that seems to be a common theme: you have a hard time believing anything that doesn’t fit with your preconceived notions.
Again, connect React dev tools to Reddit yourself. Given that you’ve been given a concrete example of a slow website, I have a hard time believing you can even differentiate a performant website from a slow one.
As well, people don't understand that React is an idempotent rendering framework. It's easy to reason about because of the same reason why functional languages are easy to reason about, it does not mutate but instead creates new copies.
The point is the same as functional languages, making immutable copies is what makes it easy to reason about, where reactive changes don't. There are ways to make VDOMs fast too, faster than reactive frameworks.
