React is a JS library by Facebook for building UI, and has become popular in modern web development. I started using React back in 2021 when there were such things like class components, and lifecycle methods like componentDidUpdate.
Nowadays (2024), React is moving towards more functional style programming with hooks. It is also becoming more full-stack-y or PHP like with the use of server components (RSC).
In this article, we’ll take a closer look at the internals of React, some of the latest changes in 18 and 19, and a conclusion with comparisons to competitors.
Virtual DOM
At the heart of React lies the Virtual DOM (VDOM), a light representation of the DOM (Document Object Model) of your web page. When you make changes to your React components, React first updates the VDOM, which is faster since it’s just a JS object. React then compares this VDOM with the previous version to get the minimal changes needed to update the real DOM efficiently.
Diffing/reconciliation
One of the key optimizations that make React fast is the diffing algo.
During diffing, React looks at the differences between the old and new VDOM trees. It identifies insertions, deletions, and updates, required to sync the real DOM and VDOM efficiently.
Here’s another blog post by a Redux maintainer, Mark, on diffing.
React 18 and 19
React 18 was released on March 29, 2022. Some important additions include concurrency, Suspense (including fallback), automatic batching, transitions (startTransition), and some new hooks like useId and useTransition.
The React 19 RC came out on April 25, 2024. It includes async form actions for react-dom, transitions to handle pending states and optimistic updates, and new hooks like useOptimistic, and useActionState.
Conclusion
React’s performance stems from concepts like the VDOM, and reconciliation. It is popularly used in frameworks like e.g. Next (server side + client side), and Vite.
One benefit of using React is the ability to use React Native which allows a shared codebase for e.g. iOS and Android apps. Another benefit is that there’s a wide assortment of libraries that you can plug and play like Radix and MUI.
Some cons of React can be managing dependencies (Webpack, Babel, etc.), state management complexity, and lack of standardization.
Other front-end alternatives include e.g. Hotwire (Ruby on Rails), Latte (PHP), Vue.js, and Svelte.
I hope you enjoyed reading this blog post and learned a little something about React. It’s my favorite framework to use for the front-end and regularly tops the SO dev survey.
If you have any questions or thoughts, feel free to leave a comment below 🙂
Leave a Reply