FIBER

Building apps for React 16

Chris Shiplet / @chrisshiplet

Synapse Studios

What is Fiber?

New algorithm for React 16's reconciler

Reconciler??

"virtual DOM"

Reconciliation in React 15

• Single, atomic thread of execution
• Recursively renders tree of components
• React optimizes work, orders changes to DOM
• "Stack Reconciler"

FIBER

• 2 phases: Render/Reconcile (interruptible), Commit (non-interruptible)
• Track children, siblings for each component
• Build "WIP" tree, avoid DOM mutation until finished
• Interrupt rendering to handle high-priority events

FIBER

Building apps for React 16

Do:

use Flow or prop-types instead of React.PropTypes

Do:

return multiple components

						render() {
							return [
								<Foo />,
								<Bar />,
							];
						}
					

Do:

use functional setState

						this.setState((state, props) => {
							return {
								someToggleValue: !state.someToggleValue,
							};
						});
					

Avoid:

React.createClass

in favor of functional components and classes

Avoid:

doing init / data fetching in

componentWillMount

Avoid:

relying on

componentWillUpdate, componentWillReceiveProps

to be called exactly once before each render

FIBER

Building apps for React 16

Chris Shiplet / @chrisshiplet

Synapse Studios