React Fiber - ReactJS Dublin Meetup

An overview of React Fiber, 5 min lightning talk for the ReactJS Dublin meetup of February 22nd 2017, kindly hosted by Hubspot.

Mostly based on the hangout hosted by Kent C. Dodds with Andrew Clark and Dan Abramov, as well as Andrew's Fiber architecture overview.

https://www.meetup.com/ReactJS-Dublin/events/236985643/
https://claudiopro.github.io/react-fiber-lightning-talk/
https://claudiopro.github.io/react-fiber-vs-stack-demo/

Transcript

1. React Fiber Overview of the rewrite of React's core Claudio Procida @claudiopro
2. Hi!
7. Core Concepts Virtual DOM Reconciliation Push vs. Pull Updates
9. Stack Synchronous Recursive Render and reconcile
11. Stack: Issues Heavyweight context Can't be split in chunks Java-like OO architecture See for insight Sebastian Markbåge's notes
13. Fiber Complete rewrite of core Async reconciliation Atomic commit
14. Fiber: Goals Pause and resume work Assign priority to different types of work Reuse previously completed work Abort work that is no longer needed
15. Fiber: Internals Uses requestAnimationFrame, requestIdleCallback APIs Iterative, not recursive Linked lists of components While loops to reconcile and update
16. Fiber: Pros Does not drop frames Splits work across frames Commits when work is complete Can de-prioritize offscreen work
17. Fiber: Cons Harder to debug Better tooling needed Dif cult to reason about Non instantaneous updates
18. Fiber: Caveats In Fiber, setState() calls will be batched more frequently. This code may not work as expected: Use the callback form instead: // Wrong this.setState({ counter: this.state.counter + this.props.increment }); // Correct this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
19. Fiber: Extras Error Boundaries Multiple components in render() Portals for dialogs Better SSR performance without client-side logic
20. Demo Fiber vs Stack
21. Fiber: When? Already in master HEAD (go check it out!) Expected enabled by default in React 16 http://is berreadyyet.com
22. Thank you!