Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Exciting Future Of React

162 views

Published on

A talk about React 16 and react-call-return

Published in: Technology
  • Be the first to comment

The Exciting Future Of React

  1. 1. The exciting future of…
  2. 2. React
  3. 3. React 16
  4. 4. Angular 1 👉 Angular 2 👉 JustAngular™
  5. 5. v0.14 👉 v15
  6. 6. React Fiber - THE CORE REACT ALGORITHM HAS BEEN COMPLETELY REWRITTEN!!! 🔥 🔥 🔥 Error boundaries Rendering multiple elements without a wrapper Portals Custom dom attributes Render only a string Improved server-side rendering
  7. 7. Fiber, whatever ¯_(ツ)_/¯ Rendering multiple elements without a wrapper 😍 Other things
  8. 8. Rendering multiple elements without a wrapper
  9. 9. Understand how JSX compilation works
  10. 10. Nope #1
  11. 11. Nope #2 const ListItems = () => { return <li> hello </li> return <li> world </li> }
  12. 12. Nope #3 const ListItems = () => { return <div> <li> hello </li> <li> world </li> </div> }
  13. 13. const ListItems = () => { return [ <li> hello </li>, <li> world </li>, <li> how are ya </li> ] } Yup, but ugly
  14. 14. const Aux = ({children}) => children; Ofc people wrote this
  15. 15. Usage const ListItems = () => { return <Aux> <li> hello </li> <li> world </li> <li> how are ya </li> </Aux> }
  16. 16. Verified live footage of the React team after seeing the Aux component
  17. 17. import {Fragment} from ‘react’; Fragments const ListItem = () => { return <Fragment> <li> hello </li> <li> world </li> <li> how are ya </li> </Fragment> }
  18. 18. JSX Fragment syntax const MultipleThings = () => { return <> <li> hello </li> <li> world </li> <li> how are ya </li> </> } (a.k.a why people switch to Vue)
  19. 19. Use cases const pairs = [ ['React', 'Vue'], ['Redux', 'MobX'], ['jQuery', 'MooTools'], ['Sass', 'Less'], ['Hillary', 'Trump'] ]; const MyList = () => { return <ul> {pairs.map(([first, second]) => <Fragment> <li>{first} </li> <li>{second} </li> </Fragment>)} </ul> }
  20. 20. Use cases const celebrities = ['Trump', 'Jake Paul', 'Justin Timberlake', 'Dan Abramov', 'Me']; const CelebritiesList = () => { return <div> {celebrities.map((celebrity, index) => <Fragment> <div> {celebrity} </div> {index !== celebrities.length - 1 && <hr />} </Fragment>} </div> }
  21. 21. A component that renders a string const ConvertTextToEmoji = ({children}) => { //insert text-to-emoji algorithm here return 'The world has enough emoji already.' } <ConvertTextToEmoji> This text should be converted to emoji. </ConvertTextToEmoji>
  22. 22. Portals Provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
  23. 23. Me reading about Portals
  24. 24. Portals //index.html <div> <div id="root"> </div> <div id="modal"> </div> </div> const Modal = ({children}) => { return ReactDOM.createPortal( children, document.getElementById('modal') ); };
  25. 25. class AboutPage extends Component { state = {modalOpened: true} toggleModal = () => this.setState({ modalOpened: !this.state.modalOpened }) render() { return ( <div> <h1>About Us </h1> <button onClick={this.toggleModal}> toggle modal </button> {this.state.modalOpened && <Modal> Content inside of modal </Modal>} </div> ); } }
  26. 26. How far is too far?
  27. 27. Demo time 🤓
  28. 28. Thinking of practical use-cases of Portals
  29. 29. Error boundaries Handling JavaScript errors in components
  30. 30. Method #1 Don’t have any errors in your components
  31. 31. Method #2 Don’t open the console, and you won’t see any errors
  32. 32. Method #3 componentDidCatch
  33. 33. componentDidCatch • If a class component defines this method, it becomes an error boundary. • Error boundaries only catch errors in the components below them in the tree. • An error boundary can’t catch an error within itself.
  34. 34. class ErrorBoundary extends React.Component { state = { hasError: false } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong. </h1>; } return this.props.children; } }
  35. 35. const App = () => ( <div> <h1> This is our app </h1> <ErrorBoundary> <GalleryWidget /> </ErrorBoundary> </div> );
  36. 36. Wrap the entire app in <ErrorBoundary/>
  37. 37. React Fiber
  38. 38. Fiber = fast TL;DR Not Fiber = slow
  39. 39. React Fiber It is responsible for most of the new features in React 16, like error boundaries and fragments. Async rendering - apps are more responsive because React avoids blocking the main thread.
  40. 40. createRef (isn't meant to replace callback refs) class MyComponent extends Component { divRef = React.createRef(); render() { return ( <div> <input type="text" ref={this.divRef} /> </div> ); } componentDidMount() { this.divRef.value.focus(); } }
  41. 41. New Context API 🎉 🎉 🎉 🎉
  42. 42. 2018 is gonna be remembered for 2 things Tide Pods & Context
  43. 43. Demo time 🤓
  44. 44. getDerivedStateFromProps getPropsAndUpdateTheStateOn EveryUpdateOfTheProps
  45. 45. getDerivedStateFromProps • A static method • Exists on the class, not on the instance • Updates state based on change of props
  46. 46. getDerivedStateFromProps static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.currentRow === prevState.lastRow) { return null; } const isScrolling = nextProps.currentRow > prevState.lastRow; return { lastRow: nextProps.currentRow, isScrollingDown: isScrolling }; }
  47. 47. Will be deprecated in React 16.4 ☠ componentWillMount ☠ componentWillUpdate ☠ componentWillReceiveProps
  48. 48. MAYBE in React 16.4 😱 New component API (no classes) (take with a grain of salt)
  49. 49. IT’S STABLE ENOUGH FOR PRODUCTION ALSO PLS SHOW A DEMO OF IT AT CONFERENCES 😍
  50. 50. react-call-return import { unstable_createCall, unstable_createReturn } from 'react-call-return';
  51. 51. Make it stable import { unstable_createCall as createCall, unstable_createReturn as createReturn } from 'react-call-return';
  52. 52. Demo time 🤓
  53. 53. ✅ kitze.io 😞 @thekitze on Twitter ✅ @kitze on GitHub ✅ @kitze on Medium
  54. 54. Please ask me anything except: - What font is that? - What font size is that? - What editor is that? - What theme do you use? ☢
  55. 55. Bedankt en tot ziens 🙏 @thekitze reactacademy.io @kitze @kitze

×