React 16, the future & you

Transcript

1. React 16, the future, & you
2. Jenn Creighton Senior Front End Engineer @ ClassPass @gurlcode
3. Agenda V 16 (React) V 16.3 (The Future) Migration (You)
4. React 16 A full rewrite of React’s reconciliation algorithm
5. Reconciliation
6. < 16 >= 16
7. Fiber
8. Cannot interrupt The main thread Unit of work Other thread work Reconcile + render Commit
9. But what is a fiber? A fiber is a JavaScript object that contains information about a component, its input and output. At any time, a component instance has at most two fibers that correspond to it: the current fiber, and the work-in-progress fiber. With Fiber, you can: pause work and come back to it later assign priority to different types of work reuse previously completed work abort work if it's no longer needed
10. Cannot interrupt The main thread Unit of work Other thread work Reconcile + render Commit
11. Sync Async
12. Unnecessary markup :(
13. Better… but a bit weird…
14. TGIF: Thank Goodness for Fragments
15. The best things have sugar.
16. Capture errors within boundaries
17. You can nest boundaries. Can only catch errors below them in the tree Cannot catch errors inside themselves Errors propagate to the next level up
18. Portals Insert a child into a different location in the DOM Still behaves like a normal React child since it still exists in the React tree Useful for modals, popovers, tooltips, etc
19. The Future
20. Sync Async
21. Farewell to componentWillMount componentWillReceiveProps componentWillUpdate
22. Do not panic.
23. componentWillMount Initializing state
24. componentWillMount Data fetching SLIDE ERROR: componentDidMount is the correct lifecycle method
25. Hello to getDerivedStateFromProps getSnapshotBeforeUpdate
26. getDerivedStateFromProps Replaces componentWillReceiveProps Called after component is instantiated or before it receives new props Return an object to update state in response to prop changes Return null to indicate no change to state
27. getSnapshotBeforeUpdate Replaces componentWillUpdate Called right before the DOM is updated Return value is provided as the third argument in componentDidUpdate Useful but often is not needed
28. React Lifecycle 2.0
29. Old Context API Returning false from shouldComponentUpdate prevented context values from updating API felt clunky and out of place
30. New Context API React.createContext
31. New Context API Provider Can be dynamically updated:
32. New Context API Consumer
33. Why is this so awesome? Context is now a first-class API Declarative! Solves shouldComponentUpdate problem Function as a child pattern is flexible & composable
34. Any downsides? Values passed to Provider can trigger Consumers to re-render. Change the value only when you want consumers to re-render. The above example triggers unnecessary re-renders because a new object is passed into the value prop each time.
35. Solution: If the value is dependent on changing state, you can pass that state in instead.
36. What do I need to do?
37. NOTHING.
38. You can still use these lifecycle methods. You can still use the old Context API. 16.3 16.x+ 17 Allows open source libraries to update Warnings for upcoming deprecations “Deprecate” lifecycles & old context
39. UNSAFE__
40. react-lifecycles-compat
41. What if I want to migrate now instead of later?
42. Strict Mode Opt-in to unsafe lifecycle warnings Double-invokes parts of the lifecycle to find side effects Development only; does not affect prod
43. Thank you!