Facebook uses its own internally developed React framework called React.js. React.js was originally created by Jordan Walke, a Facebook software engineer, and was first deployed on Facebook’s News Feed in 2011. Since then, React has become one of the most popular JavaScript frameworks for building user interfaces.
What is React?
React is an open-source JavaScript library developed and maintained by Facebook and a community of individual developers and companies. It is used for building interactive user interfaces and web applications quickly and efficiently.
Some key features of React include:
- Uses a declarative paradigm – React developers write declarative code that updates UI by modifying components
- Component-based – UI is broken down into reusable, encapsulated components
- Virtual DOM – React keeps a virtual representation of the real DOM and syncs changes efficiently
- Unidirectional data flow – Data flows in one direction from parent to child components
- JSX syntax – JSX is a syntax extension that allows writing HTML elements in JavaScript
React allows developers to create complex UIs from small, isolated pieces of code called components. Components can be reused and composed to build sophisticated web applications. The virtual DOM optimizes updates by minimizing costly DOM operations.
History of React
Here is a brief timeline of React’s development history:
- 2011 – React is created internally by Jordan Walke at Facebook
- 2012 – React is first deployed on Facebook’s News Feed
- 2013 – Instagram starts using React
- 2015 – React Native for building mobile apps is open-sourced
- 2017 – React Fiber, a reimplementation of React’s core algorithm is released
- 2020 – React 17 “Mode” version is released with no breaking changes
Initially, React was only used internally at Facebook. But in 2013, Facebook decided to open source React, allowing developers outside of Facebook to use it. This helped spur React’s rapid growth and adoption. Major companies like Netflix, Airbnb, Uber, and Dropbox started using React for their web applications. The release of React Native in 2015 also allowed developers to build mobile apps using React.
Why Facebook chose React
There are several key reasons why Facebook decided to create and standardize on React:
- Fast performance – React utilizes a virtual DOM diffing algorithm that minimizes expensive DOM operations and improves updates and re-renders.
- Modular components – React’s component model facilitates code reuse and enables separations of concerns.
- Declarative programming – React uses a declarative paradigm that is easier to reason about than imperative code.
- Cross-platform – React can be used for web, mobile (React Native), VR, and beyond.
- Active open source community – Being open source enabled contributions and support from a large community.
As a large social media platform, Facebook needed a framework that could support complex UIs that update frequently with new data. React’s performance capabilities, modular architecture, and declarative nature made it well-suited for Facebook’s needs.
How Facebook uses React
Facebook uses React extensively across its various products and services:
- News Feed – React powers Facebook’s News Feed, which has high amounts of rapidly changing content.
- Messenger – Messenger uses React for its UI like chat threads, stories, and other features.
- Instagram – Most of Instagram’s interface is built with React and React Native.
- Oculus – The Oculus website and Oculus mobile app are built using React.
- Facebook Ads – The Facebook Ads Manager dashboard uses React components.
- Portal – Facebook’s Portal product uses React for its camera effects and other parts of the interface.
React is well-suited for Facebook because of the dynamism of its products. News Feed, Messenger, Instagram, and Oculus all require high-performance UIs that can quickly incorporate new data and respond to changes. React’s declarative paradigm also improves code maintainability for large engineering teams.
Many core infrastructural components at Facebook are also built using React, like video calling, the comment system, and search functionality. Facebook maintains thousands of React components that are reused across its family of apps.
Example: News Feed
Facebook’s News Feed illustrates how React is used. The News Feed displays a scrolling list of content personalized for each member. As the member scrolls, new content dynamically loads. The virtual DOM minimizes the amount of updates needed as data changes.
Each post or story is its own React component. Components are reused and shared between the News Feed on Facebook.com and the feeds inside Facebook’s mobile apps. When data for a story changes, React only re-renders components that need updating rather than the whole page.
This declarative paradigm and component architecture enabled engineers to build and iterate on Facebook’s News Feed quickly at massive scale.
React at Facebook today
React continues to evolve both inside and outside of Facebook:
- Widely used at Facebook – Over a thousand engineers at Facebook use React daily.
- Future investments – Facebook plans to invest heavily in React, React Native, and other React libraries.
- React Native – React Native usage is growing for cross-platform mobile development.
- React 360 – Allows creating VR content using React components.
- Open source – Facebook releases React code updates frequently to the open source community.
- React Fiber – Rewrite of React’s core algorithm for improved performance.
Facebook holds an internal React conference multiple times a year. There is also an external React conference called React.js Conf for the open source community.
React is a critical part of Facebook’s front-end infrastructure. As one of the most actively maintained projects at Facebook, React’s future looks bright both inside and outside the company.
Conclusion
Facebook created React internally to solve challenges in building complex, large-scale user interfaces. React’s declarative paradigm, virtual DOM, and component model enabled Facebook to ship new product features quickly at massive scale.
Due to these benefits, React is now used extensively across Facebook’s core products like News Feed, Instagram, Messenger, and Oculus. The future of React both inside and outside Facebook continues to be strong with active development and corporate investment. Moving forward, React will power Facebook’s user experiences as the company builds the next generation of social products.