The last 6 months of React

Transcript

1. THE LAST 6 MONTHS OF REACT IN A NUTSHELL
2. LOTS OF NEW STUFF IN REACT 16 • Fragments • Error Boundaries • Portals • Improved SSR • Fiber rewrite • Async rendering
3. …AND MORE SINCE THEN • New lifecycle methods • Context
4. PREVIOUSLY…. You’ve had to wrap whatever you’re returning from render in an element
5. RETURN WHATEVER • Strings and numbers • Other react elements • Booleans • Fragments • Portals (more on this later…)
6. FRAGMENTS Essentially comma-less and keyless lists of supported return values
7. ERROR BOUNDARIES • A component that wraps around a single or group of components • Catches any exceptions that have been thrown from the child/children component/s.
8. Example: https://codepen.io/actuallyacat/pen/ ZoWQQX?editors=0010
9. PORTALS Portals let you render React-controlled DOM outside of the parent component
10. INTERESTING USE CASE https://codepen.io/davidgilbertson/pen/xPVMqp
11. BETTER SERVER SIDE RENDERING
12. HYDRATE • Only for rehydrating SSR markup • Performance gains around how Fiber reconciles the markup
13. RENDER TO STRING • Also allows you to “return whatever” • Generates smaller HTML
14. ROLLUP • Module bundler • 32% decrease in package size
15. OTHER SSR BENEFITS • Doesn’t need to be compiled • SSR markup uses more performant algorithm (doesn’t generate virtual DOM)
16. SSR PERFORMANCE
17. STREAMING • You can start sending your document to the browser before everything has been generated • Reduces time to first byte (TTFB) • https://github.com/rherwig/template-react-16-ssr
18. FIBER • React 15.x architecture was not able to support all requested features • Complete rewrite required • Ported all the tests from the existing react API
20. NEW LIFECYCLE METHODS • componentWillMount, componentWillReceiveProps, and componentWillUpdate will be deprecated • getDerivedStateFromProps is being added as a safer alternative to the legacy componentWillReceiveProps. • getSnapshotBeforeUpdate is being added to support safely reading properties from e.g. the DOM before updates are made.
21. OLD LIFECYCLE
22. NEW LIFECYCLE METHODS
23. CONTEXT • Context provides a way to pass data through the component tree without having to pass props down manually at every level. • Share data that can be considered “global” for a tree of React components • https://codepen.io/actuallyacat/pen/BxKzEa
24. REACT RFC • For feature requests • Community driven process for development • https://github.com/reactjs/rfcs
25. THE FUTURE OF REACT • Async rendering https://twitter.com/acdlite/status/ 909926793536094209 • Time Slicing • Suspense
26. Questions?