React 16: Fiber Ships, Error Boundaries Arrive

React 16 is shipping with Fiber, the complete rewrite of React's core algorithm. After 18 months of development, the new reconciliation engine is production-ready. For most developers, upgrading means changing one line in package.json. That's the real achievement—rewriting the core without breaking the world.

What's New

React 16 brings several major features:

Fiber – The new reconciliation algorithm that enables:

Incremental rendering (pausing and resuming work)
Better handling of large component trees
Foundation for future async features
Error boundaries

Error Boundaries – Catch errors in component trees:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Previously, errors in render methods would break the entire app. Now you can contain failures.

Fragments – Return multiple elements without wrapper divs:

render() {
  return [
    <li key="a">First</li>,
    <li key="b">Second</li>
  ];
}

Portals – Render children outside the parent hierarchy:

render() {
  return ReactDOM.createPortal(
    this.props.children,
    document.getElementById('modal-root')
  );
}

Useful for modals, tooltips, and overlays.

React 16 announcement

The Fiber Impact

For most apps, Fiber's improvements are subtle:

Slightly better performance in complex scenarios
Smoother animations (main thread less blocked)
Better handling of large lists

You won't see 10x speedups. Fiber is infrastructure—it makes future features possible rather than delivering immediate wins.

The real benefits come later:

Time-slicing for prioritizing updates
Async rendering for better perceived performance
Suspense for data fetching (React 17+)

Error Boundaries: Finally

Error boundaries are long overdue. Before React 16, a single error anywhere in the component tree would unmount the entire app. White screen of death.

Now you can isolate failures:

<Page>
  <ErrorBoundary>
    <Sidebar />
  </ErrorBoundary>
  <ErrorBoundary>
    <Content />
  </ErrorBoundary>
</Page>

If Sidebar crashes, Content keeps working. Users get degraded experience instead of total failure.

The caveats:

Error boundaries don't catch errors in event handlers (use try/catch)
They don't catch errors in async code (use .catch())
They don't catch errors in the error boundary itself

Still, this is huge for production resilience.

The Fragment Problem

Returning arrays of elements is better than wrapping in pointless divs, but it's still clunky:

// Need keys on every element
render() {
  return [
    <div key="1">First</div>,
    <div key="2">Second</div>
  ];
}

React 16.2 will add JSX syntax for fragments (<React.Fragment>), making this cleaner. For now, arrays work but aren't ideal.

Portals for Modals

Portals solve a long-standing problem: how to render a modal that's logically part of a component but needs to render at the document root for z-index and positioning.

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      <div className="modal">
        {this.props.children}
      </div>,
      document.body
    );
  }
}

The modal renders at the body level (so it's above everything), but events and context still flow through the React tree. This is elegant.

Server Rendering Improvements

React 16's server rendering is 3x faster and uses less memory. This matters for high-traffic sites doing SSR.

The improvements:

Stream rendering (send HTML as it's generated)
Better hydration (client takes over from server HTML)
Smaller server-side bundle

For sites doing SSR at scale, this is a meaningful performance win.

The Upgrade Path

Upgrading to React 16 is straightforward for most apps:

npm install --save react@16 react-dom@16

Run your tests. Fix deprecation warnings. Deploy.

Breaking changes are minimal:

Removed deprecated lifecycle methods had warnings in React 15.5+
Server rendering changes might affect custom SSR setups
Some internal APIs changed (don't use internal APIs)

Most apps upgrade without code changes. Facebook's internal codebase upgraded smoothly, which is why they felt confident releasing.

What Changed Internally

The Fiber rewrite touched everything. React's reconciliation algorithm went from a stack-based approach (recursive) to a fiber-based approach (linked list of work units).

This enables:

Pausing work and resuming later
Assigning priority to different types of updates
Reusing previously completed work
Aborting work if no longer needed

These capabilities don't change the API, but they unlock future features.

Performance Expectations

React 16 is slightly faster than React 15 in most cases, but not dramatically. The performance characteristics changed:

Large initial renders are slightly slower (fiber overhead)
Updates are faster (better diffing)
Complex trees handle better (incremental rendering)

If your app is slow, React 16 won't magically fix it. Profile, find bottlenecks, optimize.

The Competition

Angular 5 is shipping soon. Vue.js 2.x is mature. Preact and Inferno target smaller bundles. React 16 keeps React competitive:

Fiber matches or exceeds Angular's performance
Error boundaries match Vue's error handling
File size is smaller than React 15

React isn't the fastest framework, but it's fast enough and has the ecosystem. That's a strong position.

What's Next

React 16 is the foundation for future features:

Async rendering – React decides when to render for smoothest UX
Time slicing – Prioritize user input over background updates
Suspense – Declarative loading states for async data
Concurrent mode – Better handling of long tasks

These features aren't in React 16.0, but Fiber makes them possible. Expect gradual rollout over React 16.x releases.

Should You Upgrade?

For new projects: absolutely use React 16. No reason to start with React 15.

For existing projects: upgrade when:

You've cleared out React 15.5 deprecation warnings
Your tests pass in React 16-rc
You have time to fix any issues

The upgrade is low-risk for most apps. The benefits (error boundaries, portals, future-proofing) are worth it.

The Bigger Picture

React 16 proves that large-scale rewrites can work if done carefully:

Maintain backward compatibility
Dogfood internally first
Iterate in public with alpha/beta releases
Use feature flags to control rollout

Facebook didn't rush. They spent 18 months getting Fiber right. The result is a smooth upgrade that doesn't break the ecosystem.

This is how mature projects evolve.

For upgrade guides and documentation, see the React 16 release notes and error boundary documentation.