Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What's New with React, 2018 Edition

What's New with React, 2018 Edition

A little walkthrough of what's happening with React 16.3 (and what's on the horizon), along with why I'm super happy we chose to go with React.

Links: https://gist.github.com/jasonrhodes/6e26fc1d54a2fdc7fec64ab355a77d14

Jason Rhodes

April 04, 2018
Tweet

More Decks by Jason Rhodes

Other Decks in Programming

Transcript

  1. What’s new with React
    2018 Edition

    View full-size slide

  2. What’s new with React
    Spring 2018 Edition

    View full-size slide

  3. What’s new with React
    April 2018 Edition

    View full-size slide

  4. What’s new with React
    4 April 2018 2:51PM Edition

    View full-size slide

  5. What’s new with React

    View full-size slide

  6. What’s React?

    View full-size slide

  7. “Will I still need jQuery?”

    View full-size slide

  8. Error
    Boundaries

    View full-size slide

  9. React 16.3
    componentWillMount

    View full-size slide

  10. React 16.3
    componentWillUpdate

    View full-size slide

  11. React 16.3
    componentWillReceiveProps

    View full-size slide

  12. React 16.3
    UNSAFE_componentWillMount
    hello!
    (etc)

    View full-size slide

  13. React 16.3
    getDerivedStateFromProps
    hello!

    View full-size slide

  14. React 16.3
    New
    Context
    API

    View full-size slide

  15. <>


    Dashboard
    Submi

    >

    View full-size slide

  16. <>
    Dashboard

    >

    View full-size slide

  17. <>


    Dashboard
    Submi

    >

    View full-size slide

  18. window.store =

    View full-size slide

  19. https://codesandbox.io/s/0014vr1xnl
    https://www.youtube.com/watch?v=XLJN4JfniH4

    View full-size slide

  20. React 16.???
    Async
    Rendering

    View full-size slide

  21. React 16.???
    Async
    Rendering
    A.K.A. the reason Fiber exists

    View full-size slide

  22. React 16 Fiber
    1. Reconciliation
    2. Commit

    View full-size slide

  23. React 16 Fiber
    https://claudiopro.github.io/react-fiber-vs-stack-demo

    View full-size slide

  24. React 16 Fiber
    How do you know
    which updates are
    high priority and which
    are low priority?

    View full-size slide

  25. React 16 Fiber
    T I M E
    S L I C I N G

    View full-size slide

  26. React 16 Fiber
    S U S P E N S E

    View full-size slide

  27. React 16 Fiber

    View full-size slide

  28. React 16.???
    Async
    Rendering
    T I M E S L I C I N G + S U S P E N S E

    View full-size slide