React History – A Professional Developer’s Perspective

1. Origins: Born Inside Facebook

In 2011, Facebook engineers faced the increasing complexity of building interactive UIs at scale. They developed an internal library initially called BoltJS, then renamed to FaxJS, and eventually to React. It was first used in Facebook Feed, later Instagram in 2012, and open-sourced in May 2013.

// Initial syntax before JSX
const element = React.createElement('h1', null, 'Hello, React!');

2. JSX and the Virtual DOM

React introduced JSX, a declarative syntax that blends JavaScript and HTML, along with the Virtual DOM, a diff-based in-memory tree that optimizes UI rendering performance.

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Although browsers don't understand JSX natively, tools like Babel compile it into standard JavaScript.

3. Class Components and Lifecycle Methods

Before Hooks, React components relied on ES6 classes and lifecycle methods such as componentDidMount() and componentWillUnmount() for managing state and effects:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Guest' };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <h2>Welcome, {this.state.name}</h2>;
  }
}

While powerful, class components became increasingly complex in large applications, leading to the introduction of Hooks.

4. The Rise of Hooks

React 16.8 (2019) introduced Hooks, allowing state and side effects in functional components. Key Hooks include:

• useState for local state.
• useEffect for side effects.
• useContext for shared state.

function Clock() {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Current time: {time.toLocaleTimeString()}</p>;
}

5. React Fiber: Core Engine Reimagined

React Fiber, introduced in React 16, was a complete rewrite of the rendering engine. It enables asynchronous rendering, better prioritization, and support for concurrency in UI updates, leading to smoother experiences.

6. Server-Side Rendering and Server Components

React supported SSR early on via ReactDOMServer. Later, React Server Components emerged to separate client and server logic, reducing redundancy and improving data-fetching performance.

async function ProductServer() {
  const res = await fetch('https://api.example.com/products/1');
  const product = await res.json();
  return <div>Product: {product.name}</div>;
}

7. React 19: Developer-Centric Improvements

Released in December 2024, React 19 introduced several developer-focused APIs including useFormStatus, useActionState, and Server Actions. These enhancements simplify async flows and form behavior.

function ContactForm() {
  const status = useFormStatus();
  return (
    <form action="/api/contact">
      <input name="email" required />
      <button disabled={status.pending}>Send</button>
    </form>
  );
}

8. Offscreen State & Intelligent Optimization

React now supports preserving the state of components even when they are removed from the DOM using features like Offscreen State Preservation. Additionally, compiler-based automatic memoization is evolving rapidly.