React 16 to 18: All New Features Explained with Real Examples

Introduction

React has come a long way since version 16, evolving from a flexible UI library to a powerhouse framework used by millions of developers. But what exactly changed from React 16 to 18? What’s new, what’s better, and—more importantly—how does react help you build faster and smarter apps?

Did you know that React 18 introduced automatic batching, something developers long requested? Or that React 17 was a “no-new-feature” release focusing on gradual upgrades?

In this guide, we’ll break down the key features added in React 16, 17, and 18—along with code examples so you can hit the ground running.

React 16: The Foundation of Modern React

React 16, released in September 2017, was a major rewrite of React’s core architecture. It introduced a new core engine called Fiber, making features like concurrent rendering and error handling possible.

🚀 Major Features in React 16

1. React Fiber – Complete Core Rewrite

Fiber made React faster and more flexible. It allowed React to pause work and resume later—a building block for future features.

In my experience, Fiber made it easier to work with animations and complex UI updates without blocking rendering.

2. Error Boundaries

You can now catch errors during rendering using error boundaries.

Example:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

3. Portals

Render children into a DOM node outside the parent component hierarchy.

ReactDOM.createPortal(child, document.getElementById('modal'));

4. Fragments

Write cleaner code without extra wrapper <div> tags.

<>
  <h1>Hello</h1>
  <p>World</p>
</>

These features have paved the way for even more powerful updates in the latest release.
If you’re curious about what React 19 brings to the table, check out our guide on 19 Hidden React 19 Features You’re Totally Missing Out On.

5. Improved Server-Side Rendering (SSR)

Faster rendering performance on the server side with renderToNodeStream.

React 17: The Silent Revolution

Released in October 2020, React 17 was unique—it didn’t introduce new features but laid the groundwork for future improvements.

⚙️ Key Changes in React 17

1. Gradual Upgrades

React 17 allows multiple versions of React to work on the same page.

This was super useful for large enterprise apps that migrate React incrementally.

2. Event Delegation Changes

React now attaches events to the root container, not document, reducing conflicts with third-party scripts.

3. No New APIs

React 17 focused on making React more backward-compatible and easy to upgrade.

React 18: Welcome to Concurrent Rendering

React 18, released in March 2022, introduced a major change—Concurrent Mode—which allows React to work on multiple tasks simultaneously.

🌟 Top New Features in React 18

1. Automatic Batching

React now batches multiple state updates automatically—even in async functions or timeouts.

Example:

function handleClick() {
  setTimeout(() => {
    setCount(c => c + 1);
    setFlag(f => !f); // Both updates are batched!
  }, 1000);
}

2. Concurrent Rendering

React prepares multiple versions of the UI at the same time. This leads to smoother user experiences and better performance.

You enable concurrent features using the new createRoot API:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

3. Suspense for Data Fetching

React 18 supports Suspense for async operations—like fetching data—natively.

Example:

<Suspense fallback={<Loading />}>
  <Profile />
</Suspense>

4. startTransition()

Mark updates as non-urgent using startTransition.

startTransition(() => {
  setSearchQuery(input);
});

5. New useId Hook

Stable IDs for hydration and accessibility.

const id = useId();
return <input id={id} />;

Benefits of React 16–18 Evolution

Version	Feature	Benefit
16	Fiber, Error Boundaries	Faster rendering, better error handling
17	Gradual Upgrades	Easier migration, compatibility
18	Concurrent Mode, Suspense	Better UX, smoother rendering

Common Mistakes When Upgrading

1. Not using createRoot() In React 18.
   Without it, you miss out on concurrent features.
2. Skipping error boundaries.
   One bad component can crash the whole app if not wrapped.
3. Using old lifecycle methods.
   Avoid deprecated ones like componentWillMount.

FAQ for React

Conclusion

React’s journey from version 16 to 18 shows the framework’s maturity and forward-thinking design. Whether you’re building a large-scale enterprise app or a weekend project, these features make React faster, safer, and smarter.

Take it slow. Experiment with automatic batching, try Suspense, or refactor with useId—React 18 is built to evolve with you.

What’s your favorite React 18 feature? Drop your thoughts below! 👇