How does React core optimization work

[sanjarcode]

I have finally undertood how React optimization works. There are two key concepts here:

1. Batching DOM operations is a key optimization strategy. This was true even in 1995. And still is. Library/ framework agnostic.
2. Reflow and repaint minimisation is at the heart of UI optimization. Virtual DOM is used to minimise reflow (which minimises repaints) and page inflation overhead (done on fresh page - a large constant).

There may be some more nunaces here. But this covers the gist of it.

I was fed up superficial answers and explanations, so I tried to recreate the VDOM from the core idea of React - efficiently do dumb page reload. This replaces hard "smartness" in DOM changes (in vanilla JS) by declarative code.

And so the tagline for React is simple, albeit useless for a beginner.

React - a way to write Uls declaratively.

😂😃

So, React core replaces human smartness (and so effort) by a deterministic algorithm, with certain heuristics of course.

If an Al could be added to React core, would it improve it even more?

I think so. Would it matter? No for significant part of web development. Yes for mobile app development.

The best part - Al or not, declarativeness is preserved.

In short React optimization works on two things:

1. Graphics - repaints (dependent on reflows).
2. Pure computation - page inflation, some parts of reflows.

An analogy (speed):

• JS -> CPU
• DOM -> cache
• Reflow op - RAM
• Repaint (display) - disk

~3 orders of magnitude difference. Studying hardware in college is atleast of some use 😂.

[sanjarcode]

Things that helped: knowing how browser works - rendering engine, layout engine, reflow, repaint basics, important of batching (common sense).

[sanjarcode]

Want to just quote