Inside React 16 (Fiber) – What’s Changing?

Note: This article was originally published on July 20, 2017. Some information may be outdated.

React 16 ships with Fiber, a total rewrite of the reconciliation engine aimed at smoother UIs and better error handling.

What is Fiber?

• Breaks rendering into small units of work called fibers.
• Allows React to pause, resume, and prioritise rendering, preventing long blocks.
• Enables future features like time‑slicing and concurrent rendering.

Practical wins in React 16

1. Error boundaries - components can catch render errors and show fallback UI.
2. Return arrays from render - no extra wrapper elements needed.
3. Portals - render children into a different DOM subtree.
4. Smaller bundle - core size dropped compared with React 15.
5. Better SSR - streaming server‑side rendering support.

Minimal error boundary

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

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // log error or send to monitoring
  }

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

Wrap parts of your app:

<ErrorBoundary>
  <ProfilePage />
</ErrorBoundary>

Returning multiple elements

function List() {
  return [
    <li key="a">A</li>,
    <li key="b">B</li>
  ];
}

Later versions added the shorter <>...</> fragment syntax.

When Fiber matters

• Complex updates like animations or rich editors benefit from interruptible rendering.
• Apps with heavy trees gain smoother scrolling and gestures.
• Error boundaries keep the rest of the UI running after a crash.

Upgrade notes

• Public API is mostly unchanged; update warnings from React 15 should be resolved first.
• Old lifecycle hooks (componentWillMount, etc.) may show deprecation warnings.
• Third‑party libraries generally work; check those touching internals.

React 16’s Fiber engine lays the groundwork for future concurrent features while already improving stability and developer experience.

---

Originally published at letanure.dev