React is a popular JavaScript library developed by Facebook for building user interfaces. Since its release in 2013, React has been widely adopted by companies like Netflix, Airbnb, and Facebook itself to power the front-ends of their web and mobile applications.
The Origins of React at Facebook
Facebook created React to solve some of the challenges they were experiencing with their web application frontend. In the early 2010s, Facebook’s web app was built using a combination of PHP, HTML, CSS, and JavaScript. As the app grew in size and complexity, Facebook’s engineers found it difficult to maintain and iterate on the frontend codebase.
Some of the specific problems Facebook experienced included:
- DOM manipulation was very slow due to the large size of the app
- It was difficult to reuse components across the app
- There were data inconsistencies across views
- Simple changes would often break unrelated parts of the app
To address these challenges, Facebook engineers including Jordan Walke created a new JavaScript library for building the views. This early version of React was called FaxJS and it was first deployed in Facebook’s News Feed feature in 2011.
Early Development of React
After the initial success of FaxJS, Facebook engineer Jordan Walke wanted to extract the core view rendering concepts from it to create a more generalized library for Facebook’s frontend. This led to the first version of React being released in May 2013.
Some key milestones in React’s early development included:
- May 2013 – React 0.3.0 is released at Facebook’s F8 conference
- October 2013 – React is open-sourced at JSConf US 2013
- December 2013 – React 0.5.0 is released
- May 2015 – React 0.13.0 introduces ES6 class syntax
- April 2016 – React 15.0.0 is released
During this period, React adoption steadily grew within Facebook and amongst the open source community. Facebook continued to use it to build key products like Instagram web, Ads Manager, and Facebook Search.
Why Facebook Created React
There were a few key reasons why Facebook made the decision to create React:
To Improve Developer Productivity
The component model of React with its one-way data flow made it easier for Facebook engineers to work on complex user interfaces without stepping on each other’s toes. React’s use of an intermediate Virtual DOM allowed engineers to write code as if the entire UI was rendered on each change while React took care of optimizing the actual DOM updates.
To Enable Reusable Components
React’s component model made it straightforward to encapsulate functionality into reusable UI components. These React components could then be shared across different web pages or even different apps at Facebook. This improved code reuse and reduced duplication.
To Improve Code Maintainability
The declarative programming style encouraged by React helped make frontend code at Facebook more predictable and easier to maintain at scale. React’s strict division of UI, state, and data flow logic made the app more modular.
To Improve Performance
React’s use of a Virtual DOM diffing algorithm allowed it to minimize costly DOM operations required to update the UI. This along with techniques like shouldComponentUpdate helped improve rendering performance compared to Facebook’s old frontend codebase.
To Improve Data Consistency
By using React, Facebook was able to have a single source of truth for the data in a component. This along with immutable data structures helped reduce data inconsistencies across views.
Key Benefits of React for Facebook
Here are some of the key benefits Facebook realized from adopting React:
- React helped improve initial page load times. For example, React helped reduce time to interactive on Facebook’s homepage by 5x.
- React helped reduce the download size of Facebook’s app by 45%
- React’s component architecture enabled code reuse across Facebook’s apps.
- Developer productivity increased thanks to React’s focus on modularity.
- Reasoning about product features became easier due to predictable data flow.
In addition to improving Facebook’s own apps, releasing React as open source enabled other companies to benefit from the library as well.
The Growth of React
Since its open source release in 2013, React has experienced rapid growth both within and outside of Facebook:
- It currently has over 150,000 GitHub stars and is the 2nd most starred project on GitHub
- Hundreds of thousands of developers use React around the world
- Many prominent tech companies use it including Netflix, Uber, Twitter, Airbnb, and Dropbox
- It consistently trends as one of the most in-demand web development skills
Facebook continues to sponsor React’s development along with the help of open source contributors. New features are added over time based on feedback from the developer community.
Conclusion
Facebook created React in 2011 to solve challenges they were facing building and maintaining complex frontend user interfaces. React’s component model enabled better code reuse and modularity while its use of a Virtual DOM improved rendering performance.
Since its open source release, React has seen massive adoption and growth. Its declarative programming style and focus on modularity has made it popular for building robust frontends. React has enabled Facebook and other companies to create complex web UIs that are fast, scalable, and maintainable over time.