# React Fiber
## Overview of the rewrite of React's core
Claudio Procida [@claudiopro](https://github.com/claudiopro)
Core Concepts
- Virtual DOM
- Reconciliation
- Push vs. Pull
- Updates
Stack
- Synchronous
- Recursive
- Render and reconcile
# Stack: Issues
* Heavyweight context
* Can't be split in chunks
* Java-like OO architecture
* See [Sebastian Markbåge's notes](https://github.com/facebook/react/issues/7942) for insight
Fiber
- Complete rewrite of core
- Async reconciliation
- Atomic commit
# Fiber: Goals
* Pause and resume work
* Assign priority to different types of work
* Reuse previously completed work
* Abort work that is no longer needed
Note:
In a sense, Fiber's goals are to build a flexible and extensible UI rendering scheduler
# Fiber: Internals
* Uses `requestAnimationFrame`, `requestIdleCallback` APIs
* Iterative, not recursive
* Linked lists of components
* While loops to reconcile and update
# Fiber: Pros 🎉
* Does not drop frames
* Splits work across frames
* Commits when work is complete
* Can de-prioritize offscreen work
# Fiber: Cons 😭
* Harder to debug
* Better tooling needed
* Difficult to reason about
* Non instantaneous updates
# Fiber: Caveats
In Fiber, `setState()` calls will be batched more frequently. This code may not work as expected:
```js
// Wrong
this.setState({
counter: this.state.counter + this.props.increment
});
```
Use the callback form instead:
```js
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
```
# Fiber: Extras 🎁
* Error Boundaries
* Multiple components in `render()`
* Portals for dialogs
* Better SSR performance without client-side logic
Note:
React will add new features while implementing Fiber. It will add support for error handling via
Error Boundaries, sort of an equivalent to catch blocks. Error Boundaries are components to render
in case of exceptions in any of the lifecycle methods.
Additionally, render() will be able to return multiple components. This will support use cases like
tables, where collections of children should not be wrapped in parent elements. It will also play
nicely with Flexbox or Grid layouts where flex parent and children should not be separated by an
intermediate element.
Finally, server side rendering will be decoupled from the Stack implementation, which currently
slows down rendering to string, that requires no reconciliation. There is currently no plan to
provide a replacement implementation, but it could be a streaming one.
# Demo
[Fiber vs Stack](https://claudiopro.github.io/react-fiber-vs-stack-demo/)
# Fiber: When?
* Already in master HEAD (go check it out! 😍)
* Expected enabled by default in React 16
* http://isfiberreadyyet.com
Note:
Fiber is expected to be available in 2017 and will be enabled by default in React 16.
The reason why it's not enabled yet is because it's still broken.
There is a website, isfiberready.com, which shows the progress in terms of test pass rate.
Currently, test success rate is 98.1%