What Makes React Fast?
Virtual DOM: Efficient updates via lightweight representation!
Let’s say that we have a page that has various components. we only want to update some parts of the page or some components. Most JavaScript frameworks would rebuild the entire page. That’s more work than necessary! Only some components changed, but the remaining components get rebuilt exactly how they were before.
The more UI components we have on our page, the more expensive the DOM updates can be, since they would all be re-rendered on every DOM update. To address this problem, React popularized something called the virtual DOM.
Diffing Algorithm: Minimizes real DOM changes.
Batched Updates: Reduces frequent DOM manipulation.
Component-Based: Reusable components ease updates.
Memoization: Caches results to prevent re-renders.
Get Kavyabhat’s stories in your inbox
Join Medium for free to get updates from this writer.
Pure Components: Update only on prop changes.
Concurrency: Responsive rendering via Concurrent Mode (Parallel processing for more responsive rendering).
React Fiber: Optimized algorithm for updates.
DevTools: Tools aid performance monitoring.
SSR/SSG: Better initial load times (pre-render components on the server) and SEO.
Stackademic
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us on Twitter(X), LinkedIn, and YouTube.
- Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.
