React Next

Fiber and Further

Created by Yevhen Shemet
github: yevhene

Not Fiber

DEMO: Stack

Problem?

One thread

Solution?

Cooperative scheduling

React rendering

Vitrual DOM

Reconciliation

Stack algorithm - Depth-first, non-interruptible

Fiber

New Reconciliation Algorithm

Deferred Updates Mode


tick() {
  ReactDOM.unstable_deferredUpdates(() => (
    this.setState((prevState) => ({
      tick: prevState.tick + 1
    }))
  ))
}
            
Aware of multiple calls

DEMO: Fiber

Compare

Not fiber Fiber

Fiber Explained

Phases

  1. reconciliation/render phase - interruptible, cancellable, repeatable
  2. commit phase - solid

Reconciliation

Work broken up into chunks


window.requestIdleCallback(callback[, options])
            
*Polyfilled if no browser support

Fiber Object


{
  stateNode
  child
  return
  sibling
}
            
current tree
workInProgress tree
determining which nodes to upgrade
cloning DOM nodes

Effects List

Pending Commit

Commit

double buffering

Prioritization

  • Synchronous (current)
  • Task (before next tick)
  • Animation (before next frame)
  • High
  • Low
  • Offscreen/Hidden

DEMO: Starvation

Other Features

Fragment (Array and Strings)


const Cars = () => {
  return [
    <Car />, <Car />, <Car />
  ]
}
            

Error boundaries


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  componentDidCatch(error, info) {
    this.setState(() => { hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return 

Something went wrong.

} return this.props.children; } }

Error boundaries 2


<ErrorBoundary>
  <Map />
</ErrorBoundary>
            

Portals


render() {
  return ReactDOM.unstable_createPortal(<Modal />, domElement)
}
            

When?

isfiberreadyyet.com

Migration

Callbacks

  • phase 1: render/reconciliation (multi)
    • componentWillMount
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
  • phase 2: commit
    • componentDidMount
    • componentDidUpdate
    • componentWillUnmount

Errors

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.

Further

Prioritization Utilization

Offscreen/Hidden

Environment agnostic

  • DOM (React DOM)
  • Mobile (react-native)
  • Console (react-blessed)
  • VR (aframe-react)
  • Arduino (react-hardware)
  • ...

Code splitting

  • Stream rendering
  • Pre-rendering content without update the DOM

Deeper

Thank You!