React is a popular JavaScript library developed by Facebook for building user interfaces. Given that Facebook created React, it would make sense that they use it to build their flagship product – the Facebook website and mobile apps. In this article, we’ll take a deep dive into whether Facebook does indeed use React and how they leverage it within their massive codebase.
The Origins of React at Facebook
Facebook engineers Jordan Walke and Pete Hunt created an early prototype of React in 2011. At the time, Facebook was dealing with increasingly complex frontend code as more features were added to the site. The existing code became difficult to maintain as the site grew. Walke and Hunt developed React to solve issues of slow rendering and difficulty maintaining complex interfaces within Facebook’s codebase.
The first major version of React was released as an open source project at JSConf US in May 2013. At that point, it was already being used in Facebook’s News Feed. Over the next several years, usage of React expanded across Facebook’s web, mobile web, and mobile app codebases.
Facebook’s Adoption of React
In the early days of React, Facebook was still using a mix of server-side rendering, PHP, and traditional jQuery-based JavaScript code in places. Adoption of React started with newer features and areas of the site for greenfield development. Over time, legacy code was refactored to use React as well.
Here are some examples of how Facebook adopted React:
- News Feed – One of the first major uses of React at Facebook. The News Feed is one of the most complex and performance-critical parts of the site.
- Messenger – Facebook’s desktop and mobile Messenger web apps are built with React.
- Facebook Ads Manager – The dashboard for managing Facebook ads uses React on the frontend.
- Facebook Business Manager – Another React-based dashboard for business accounts.
- Graph API Explorer – The tool for testing and debugging the Facebook Graph API uses React.
- React Native – Facebook’s React-based framework for building mobile apps is used extensively in Facebook’s own iOS and Android apps.
By 2017, Facebook reported that its website and mobile apps were built predominantly with React. The majority of new code was being written in React, and legacy code was being progressively refactored as well.
Why Facebook Chose React
There are several key reasons why React appealed to Facebook as a frontend framework:
- Modular components – React’s component model allows building complex UIs out of encapsulated, reusable components. This aligns well with Facebook’s large engineering organization.
- Declarative programming – React uses a declarative paradigm where developers express the desired UI state rather than imperatively manipulating the DOM. This makes it easier to reason about complex application UIs.
- Performance – React uses a virtual DOM diffing algorithm to minimize costly DOM operations required to make updates. This results in excellent performance for dynamic interfaces.
- Mobile – React Native allowed Facebook to leverage their web React knowledge to build mobile apps for iOS and Android more efficiently.
- General purpose – React wasn’t designed just for Facebook – it was created to be flexible enough to handle the diverse needs of any web application.
Facebook’s React Stack
React is the core view layer library used at Facebook. However, the entire frontend stack consists of several other related technologies:
- Flux – The Flux architectural pattern is used for state management in Facebook’s React apps. It promotes unidirectional data flow and centralized control of application state.
- GraphQL – Facebook’s GraphQL query language is used for fetching data in React components. It provides a flexible, declarative way of specifying exactly the data needed by the UI.
- Flow – This static type checker helps catch bugs and improves developer productivity in Facebook’s large-scale React codebase.
- Jest – Jest is Facebook’s JavaScript testing framework optimized for React-based codebases.
Together with React, these tools form a comprehensive frontend platform optimized for performance, scalability, and productivity.
React at Scale at Facebook
Very few companies outside Facebook operate at a comparable scale. Facebook runs some of the largest, most performance-critical React applications in the world. Here are some numbers that give an idea of React’s scale at Facebook:
- More than 50 thousand React components
- Tens of millions of lines of React code
- Used by more than 15 thousand Facebook employees
- Powers Facebook sites and apps with billions of monthly active users
- Handles render and interaction latencies of
Operating React at this massive scale required Facebook to solve performance, debugging, testing, and other infrastructure challenges. However, the benefits of a consistent cross-platform UI framework were well worth the effort for Facebook.
Example React Components Used at Facebook
To get a better idea of how Facebook leverages React, here are some descriptions of key React components used under the hood:
News Feed
The News Feed is assembled from many different React components like Story, StatusUpdate, and Comments. These components are dynamically populated with stories and posts as data comes in from Facebook’s servers. Client-side code then renders the components into an optimized news feed tailored for each user.
Messenger Threads
In Messenger, each chat thread uses a Thread component which contains the messages between participants. The messages themselves are individual Message components that handle rendering single messages appropriately. As new messages come in, the data is passed down into the Message components.
Ad Manager Components
The Facebook Ads Manager user interface is composed of many modular React components. These include components for navigation, account overview, campaign and ad creation wizards, performance charts, and more. The modular architecture allows features to be added and updated independently.
Graph API Explorer
Graph API Explorer uses reusable React components for the query entry form, documentation, version selection, and response display areas. React allows these components to update independently while keeping everything in sync.
React Performance Optimizations at Facebook
To make React scale to Facebook’s needs, extensive performance engineering work was required. Facebook uses a variety of optimizations, tools, and best practices to make React fast at their scale.
Code Splitting
Facebook breaks its React codebase down into many small chunks that can be loaded dynamically only when needed. This allows users to get interactive faster by loading just the code required for their initial view.
Async Rendering
Facebook prioritizes getting UI updates on the screen quickly, even if the full data set is not ready. Further asynchronous network requests then incrementally populate the components as data arrives.
Windowing
For feeds with large data sets, Facebook only renders small subsets of posts called windows as the user scrolls. This minimizes memory usage and reduces the rendering workload.
Consistency Checks
Custom linting rules at Facebook enforce best practices like consistent component structures and deterministic data flows. These consistency checks reduce bugs and boost performance.
Performance Monitoring
Facebook has extensive performance measurement baked into their React stack. This allows them to catch regressions, profile component renders, and continuously optimize bottlenecks.
Limitations of React for Facebook
Despite massive adoption, React isn’t a silver bullet or perfect solution to every frontend need at Facebook. Some notable limitations include:
- Not optimal for static content – Server-side rendering and client-side hydration adds complexity for content that changes infrequently.
- Mobile limitations – React Native still lags behind true native development for some device-specific features and performance.
- Legacy browser support – Supporting outdated browsers like IE11 remains a challenge with newer web tech like React.
- animations – Complex bespoke animations can be difficult to integrate smoothly with React’s declarative rendering.
- Steep learning curve – Developing high-quality React code has a ramp up and requires strong JavaScript skills.
Facebook puts heavy engineering effort into overcoming these limitations where possible. They also judiciously use other technologies alongside React where it makes sense.
Future React Plans at Facebook
Facebook remains fully committed to React in both the near and long term future:
- Continued expansion – Facebook plans to use React for even more of their web, mobile web, and native mobile experiences.
- Investment in React Native – Facebook is heavily investing in React Native for critical mobile app development needs.
- Improving developer productivity – There is ongoing work to improve the developer experience building large apps with React and its ecosystem of tools.
- Public community support – Facebook sponsors and contributes heavily to open source React efforts to support the broader community.
Given React’s effectiveness for Facebook, they are unlikely to move away from it anytime soon barring any major unforeseen shifts in frontend development.
Conclusion
In summary:
- Facebook engineered React internally to solve frontend problems within their sprawling codebase.
- React is used extensively across Facebook’s web and mobile apps today.
- It scales to Facebook’s mammoth user base thanks to extensive performance optimizations.
- React, Flux, GraphQL, and related tools form a comprehensive frontend platform at Facebook.
- Facebook is committed to React’s continued growth and improvement.
While no technology is perfect, Facebook found React’s strengths like modularity, performance, and flexibility critical to supporting their business and product needs. Given React’s effectiveness for Facebook, it seems likely to remain a foundational part of their stack for the foreseeable future.