DEV Community: Mohamed Siraj

Evolution of React: A Version-by-Version Comparison

Mohamed Siraj — Sun, 16 Mar 2025 17:52:19 +0000

Introduction

React, developed and maintained by Facebook (now Meta), has revolutionized the way developers build user interfaces. Since its initial public release in 2013, React has undergone significant transformations with each major version bringing new features, performance improvements, and paradigm shifts. This article explores the evolution of React across its major versions, highlighting key changes that have shaped modern web development.

React 0.x to 15.x: The Foundation Years

React 0.14 (2015)

React's early versions established the component-based architecture that would become its hallmark. Version 0.14 made a significant architectural change by splitting the library into two packages:

react: The core library
react-dom: DOM-specific methods

This separation was the first step toward React's platform-agnostic philosophy, later enabling React Native development.

React 15.0 (April 2016)

React 15 was primarily a stability-focused release that eliminated many deprecation warnings from 0.14. Key improvements included:

Significant rendering performance improvements
Support for SVG elements
Removal of several deprecated APIs
Enhanced developer warnings and error messages

React 16.x: The Fiber Era

React 16.0 (September 2017)

React 16, codenamed "Fiber," represented a complete rewrite of React's core reconciliation algorithm. This groundbreaking update introduced:

Fiber Reconciler: A new internal engine enabling incremental rendering
Fragments: Allowing multiple elements without a wrapper node
Error Boundaries: Component-level error catching
Portals: Rendering children into DOM nodes outside the parent hierarchy
Custom DOM Attributes: Support for non-standard attributes
Improved Server-side Rendering: With streaming support

React 16.3 (March 2018)

This version introduced important lifecycle changes and new context API:

New Context API: A more efficient and reliable way to share state across components
createRef API: A new way to create refs
forwardRef API: For forwarding refs to child components
Component Lifecycle Changes: Introduced new lifecycle methods and deprecated others

React 16.8 (February 2019)

Perhaps the most transformative update in React's history:

Hooks: Introduced useState, useEffect, useContext, and more, allowing functional components to use state and lifecycle features previously only available in class components
This fundamentally changed React's programming paradigm, gradually shifting developers away from class components

React 17.x: The Bridge Release

React 17.0 (October 2020)

React 17 was unusual as it contained no new developer-facing features. Instead, it focused on:

New JSX Transform: Eliminating the need to import React in JSX files
Event Delegation Changes: Events now delegate to the root where React is rendered rather than the document
Gradual Upgrades: Enabling different versions of React to coexist in the same app
Removal of Event Pooling: Improving event handling
Aligning with Browser Behavior: For onFocus and onBlur events

These changes were designed to make future upgrades easier and to position React for future improvements.

React 18.x: Concurrency and Beyond

React 18.0 (March 2022)

React 18 introduced the concept of concurrent rendering, a fundamental shift in how React works:

Concurrent Rendering: Allowing React to prepare multiple versions of the UI simultaneously
Automatic Batching: Improved performance through better state update batching
Transitions: A new API to distinguish between urgent and non-urgent updates
Suspense on the Server: Improved server-side rendering with streaming
New Hooks: useDeferredValue, useTransition, useId
New Client and Server Rendering APIs: createRoot, hydrateRoot

React 19.x: Performance and Developer Experience

React 19.0 (2023)

React 19 built upon the concurrent rendering foundation established in React 18, with a focus on performance optimizations and improved developer experience:

Actions: A new API for managing form submissions and other user interactions
React Compiler: Code transformation that automatically optimizes renders
Server Components: Full implementation of React Server Components (RSC)
Asset Loading: Built-in support for images, fonts, and other assets
Document Metadata: New APIs for managing document titles and meta tags
Improved Suspense: Enhanced capabilities for data fetching and code splitting
Simplified Hydration: More efficient client hydration process
React Cache: Built-in caching mechanism for data fetching
Streaming SSR Improvements: Better handling of streaming server-rendered content

The introduction of React Server Components in React 19 represents one of the most significant architectural shifts since the introduction of Hooks, enabling developers to build components that execute only on the server, reducing bundle size and improving performance.

Performance Comparisons

Feature	React 15	React 16	React 17	React 18	React 19
Initial Render	Baseline	~30% faster	Similar to 16	Varies by application	Significantly faster with compiler
Updates	Blocking	Blocking	Blocking	Concurrent (optional)	Concurrent (default)
Memory Usage	Baseline	Reduced	Similar to 16	Further reduced	Optimized with RSC
Bundle Size	~45KB	~39KB	~42KB	~44KB	Reduced with server components
Hydration	Full	Full	Full	Partial/Streaming	Progressive/Optimized

Developer Experience Evolution

React's evolution hasn't just been about performance and features—it has dramatically transformed the developer experience:

Server Components in React 19

// React 19 Server Component
// This component runs only on the server and doesn't increase client bundle size
"use server";

import { db } from '../database';

export default async function UserProfile({ userId }) {
  // This database call happens on the server
  const user = await db.users.findUnique({ where: { id: userId } });

  return (
    <div className="profile-container">
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      {/* Client components can be used within server components */}
      <ClientInteractiveComponent userId={user.id} />
    </div>
  );
}

// Client component that includes interactivity
"use client";

function ClientInteractiveComponent({ userId }) {
  const [isFollowing, setIsFollowing] = useState(false);

  return (
    <button onClick={() => setIsFollowing(!isFollowing)}>
      {isFollowing ? 'Unfollow' : 'Follow'}
    </button>
  );
}

From Classes to Hooks

// React 15-16 Class Component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

// React 16.8+ Hooks Component
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

From Context API to useContext

// React 16.0 Context
const ThemeContext = React.createContext('light');

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <button theme={this.context}>Button</button>;
  }
}

// React 16.8+ useContext
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>Button</button>;
}

Migration Considerations

When upgrading between major React versions, teams should consider:

Deprecated Features: Each version deprecates certain APIs and patterns
Browser Support: Newer React versions may drop support for older browsers
Third-party Libraries: Ensure compatibility with ecosystem libraries
Testing Strategy: Comprehensive testing is crucial during upgrades
Incremental Adoption: Especially for React 18's concurrent features

Community Impact

React's evolution has shaped the broader JavaScript ecosystem:

State Management: From Redux to Recoil, from Context to Jotai
Meta-frameworks: Next.js, Gatsby, Remix built on React's foundation
Tool Chains: Create React App to Vite
Static Site Generation: React-based SSG solutions
Component Libraries: Material-UI, Chakra UI, and many others

Conclusion

React's journey from a simple UI library to a comprehensive framework for building user interfaces reflects broader trends in web development. Each major version has brought significant improvements while maintaining React's core philosophy of declarative, component-based UI development.

The shift from class components to hooks, from synchronous to concurrent rendering, and from client-only to server components represents React's continuous adaptation to the changing needs of web developers. React 19's introduction of a mature Server Components implementation marks the beginning of a new chapter, where the boundaries between client and server rendering blur, creating new possibilities for performance optimization and developer experience.

As the React team continues to evolve the library, they've maintained a careful balance between innovation and stability, ensuring that each new version remains true to React's original goal: making it painless to create interactive UIs, while progressively incorporating ideas that push web development forward.

Whether you're maintaining a legacy application on an older version or starting fresh with React 18, understanding this evolution helps contextualize React's design decisions and better prepares you for future developments in the ecosystem.

References

Webpack 5: The Next Generation Module Bundler

Mohamed Siraj — Sun, 02 Mar 2025 08:05:16 +0000

In the ever-evolving landscape of JavaScript development, having a reliable and efficient build tool is essential. Webpack has long been the go-to module bundler for many developers, and with the release of Webpack 5, it continues to improve the development experience with new features and optimizations.

What is Webpack?

Webpack is a static module bundler for modern JavaScript applications. It examines your entire project, builds a dependency graph, and generates one or more bundles. It's not just for JavaScript—Webpack can handle CSS, images, fonts, and more with the right loaders and plugins.

Key Improvements in Webpack 5

1. Improved Performance

Webpack 5 brings significant performance improvements through persistent caching, which allows it to store and reuse previously compiled modules between builds:

// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

2. Tree Shaking Enhancements

Tree shaking (the process of eliminating unused code) has been improved to handle more scenarios:

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true,
    minimize: true
  }
};

3. Module Federation

One of the most exciting features in Webpack 5 is Module Federation, which allows multiple independent builds to form a single application:

// host application webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// remote application webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Setting Up a Basic Webpack 5 Project

Let's walk through setting up a simple project with Webpack 5:

Step 1: Initialize a new project

mkdir webpack5-demo
cd webpack5-demo
npm init -y

Step 2: Install Webpack dependencies

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev

Step 3: Create project structure

webpack5-demo/
├── src/
│   ├── index.js
│   └── component.js
├── webpack.config.js
└── package.json

Step 4: Add content to files

src/component.js:

export function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello Webpack 5!';
  return element;
}

src/index.js:

import { component } from './component';

document.body.appendChild(component());

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // Clean the output directory before emit
  },
  devServer: {
    static: './dist',
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack 5 Demo',
    }),
  ],
  optimization: {
    runtimeChunk: 'single',
  },
  cache: {
    type: 'filesystem', // Use filesystem caching
  },
};

Step 5: Update package.json scripts

"scripts": {
  "start": "webpack serve",
  "build": "webpack"
}

Step 6: Run the development server

npm start

Adding Basic Loaders for Assets

Step 1: Install CSS loader and style loader

npm install css-loader style-loader --save-dev

Step 2: Add a CSS file

src/style.css:

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.title {
  color: #333;
  text-align: center;
}

Step 3: Update the component and webpack config

src/component.js:

import './style.css';

export function component() {
  const element = document.createElement('div');
  element.innerHTML = '<h1 class="title">Hello Webpack 5!</h1>';
  return element;
}

webpack.config.js (add module rules):

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

Implementing JavaScript Transpilation with Babel

Step 1: Install Babel dependencies

npm install @babel/core @babel/preset-env babel-loader --save-dev

Step 2: Update webpack configuration

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    },
    // ... other rules
  ]
}

Step 3: Use modern JavaScript features

// src/component.js
export const component = () => {
  const element = document.createElement('div');

  // Using template literals
  element.innerHTML = `
    <h1 class="title">Hello Webpack 5!</h1>
    <p>Current time: ${new Date().toLocaleTimeString()}</p>
  `;

  return element;
};

Creating a Production Build

For production builds, you might want to split your configuration:

webpack.prod.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  output: {
    filename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
});

Then update your package.json:

"scripts": {
  "start": "webpack serve --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
}

Using Module Federation

Module Federation allows for code sharing between independently built applications. Here's a simple example of how to implement it:

Host App (App A)

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      filename: 'remoteEntry.js',
      remotes: {
        appB: 'appB@http://localhost:3002/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// App.js
import React, { Suspense } from 'react';
const RemoteButton = React.lazy(() => import('appB/Button'));

const App = () => (
  <div>
    <h1>Host Application</h1>
    <Suspense fallback="Loading Button...">
      <RemoteButton />
    </Suspense>
  </div>
);

Remote App (App B)

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'appB',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// src/Button.js
import React from 'react';

const Button = () => (
  <button>App B Button</button>
);

export default Button;

Conclusion

Webpack 5 brings significant improvements to the already powerful bundler, with features like persistent caching, improved tree shaking, and Module Federation. These enhancements make it easier to build faster, more efficient, and modular JavaScript applications.

By understanding and implementing these features, you can take full advantage of what Webpack 5 has to offer and improve both your development experience and the performance of your applications.

Remember that Webpack is highly configurable, and this article only scratches the surface of what's possible. Be sure to check the official Webpack documentation for more detailed information and advanced configurations.