When Facebook Engineers found it increasingly harder to manage their vast codebase in the early 2010s, they had to hire more hands, over time the cascading code and technical debt, slowed them down as the company codebase expanded; and they had to find a way around it.
Facebook runs on XHP, which is Facebook’s customized version of PHP that comes with automatic XSS protection. XSS exploits are typical man-in-the-middle attacks that steal user sessions and cookies, compromising secured and personal data.
While XHP is excellent at securing Facebook from data breaches, it wasn’t good at all when it had to render dynamic web pages, every change in the state required a re-rendering of the entire Document Object Model (DOM) causing losses of saved user data in the DOM.
Soon after Facebook acquired Instagram, React was decoupled and used on Instagram as a Library. This was the first step in the evolution of React as a global front-end library for developers.
After a backlash from Developers over the BSD+ patent in 2017, React was re-licensed under the MIT License sparking widespread interest in the library.
Key features of React
- Virtual DOM: imagine a bicycle object with 2 tires, 2 wheels, and other parts, colored red, let’s call it “Bikee”, for every change in any of these properties or mutation to the object (say the color is resprayed blue), React realizes what has changed through it’s props/state comparing algorithm and updates that particular node through “reconciliation”, without reloading the entire DOM.
- Server-side rendering: React is capable of rendering on the server instead of the client. This increases page load time resulting in better user experience, improves search engine indexing and site conversion through social media sharing. After the single page, React App is generated on server-side, all other subsequent interactions are handled on the client-side.
- Portals: Portals is a new cool feature that allows Developers to target and render components outside of the DOM hierarchy of the parent component. This feature is excellent at targeting and rendering Modals, Overlays, Pop-ups etc.,
- React 360: React 360 is a framework for the creation of 3D and VR user interfaces. It is built on top of React. React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web, it is developed by Oculus VR ( a sub-company of Facebook) for building VR Apps via the declarative component method of building React Apps. React 360 is simplifying the VR app creation ecosystem.