Introduction
React was created by Jordan Walke, a software engineer at Facebook (now Meta), and was first deployed internally on Facebook's News Feed in 2011 and later on Instagram in 2012. It was publicly open-sourced at JSConf US in May 2013. React was born out of a need to manage complex, frequently updating UIs, like a live news feed, without the performance and maintainability problems that came from manually tracking DOM updates.
Cricket analogy: Like Sachin Tendulkar debuting at a small domestic ground before becoming a global name, React was quietly deployed on Facebook's News Feed in 2011 before its public unveiling at JSConf US in 2013.
How It Evolved
Early React (2013-2015) introduced the Virtual DOM and one-way data flow, popularizing the idea of building UIs as trees of composable components. In 2015, React Native brought the same component model to mobile app development. In 2016, React 15 stabilized the rendering engine. In 2017, React 16 ('Fiber') introduced a completely rewritten reconciliation engine enabling features like error boundaries, fragments, and portals, as well as laying the groundwork for asynchronous rendering.
Cricket analogy: The Virtual DOM and one-way data flow are like a scorer maintaining a shadow scoreboard offline and syncing only the changed figures to the stadium display, avoiding a full board refresh after every ball, refined through React 15 and 16's Fiber engine.
The most significant shift for everyday developers came in React 16.8 (2019), which introduced Hooks. Hooks let function components use state, lifecycle-like behavior, and context without writing class components, which quickly made function components the preferred way to write React. React 18 (2022) then introduced concurrent rendering features such as automatic batching, transitions, and the new root API (createRoot), improving performance for complex, interactive applications.
Cricket analogy: React 16.8's Hooks letting function components hold state is like allowing a specialist bowler to also bat effectively without needing the full all-rounder training class, simplifying the squad setup for 2019 onward.
// Class component (pre-Hooks style, still supported)
class Timer extends React.Component {
state = { seconds: 0 };
componentDidMount() {
this.interval = setInterval(
() => this.setState({ seconds: this.state.seconds + 1 }),
1000
);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <p>{this.state.seconds}s elapsed</p>;
}
}Modern Equivalent
// Function component with Hooks (modern style)
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(id);
}, []);
return <p>{seconds}s elapsed</p>;
}Explanation
Both Timer components behave identically, but the Hooks version is shorter and avoids the ceremony of extending React.Component, binding methods, and juggling this. This transition is a good illustration of React's overall evolution: the underlying rendering model has become more efficient and concurrent-friendly, while the developer-facing API has become simpler and more function-oriented.
Cricket analogy: The Hooks version avoiding 'this' binding ceremony is like a batter using a lighter modern bat instead of the older heavier willow, same job done, less physical strain, reflecting React's shift toward simpler tools.
Class components are still fully supported by React and appear in many production codebases and older tutorials, but new code is written almost exclusively with function components and Hooks.
Key Takeaways
- React originated at Facebook in 2011-2012 and was open-sourced in 2013.
- React Fiber (React 16, 2017) rewrote the reconciliation engine to support features like error boundaries and asynchronous rendering.
- Hooks (React 16.8, 2019) made state and lifecycle behavior available in function components, shifting the community away from class components.
- React 18 (2022) introduced concurrent rendering, automatic batching, and the createRoot API.
Practice what you learned
1. Where and when was React first created?
2. What major React version introduced Hooks?
3. What was the primary purpose of the React Fiber rewrite in React 16?
4. What key feature did React 18 introduce?
Was this page helpful?
You May Also Like
Introduction to React
A beginner-friendly overview of what React is, why it exists, and how it lets you build UIs from reusable components.
Virtual DOM and Reconciliation
Understand how React's Virtual DOM and reconciliation algorithm efficiently update the real browser DOM.
Introduction to React Hooks
Learn what React Hooks are, why they were introduced in React 16.8, and how they let function components use state and lifecycle features.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics