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

Rethinking with React 16

Vivek Nayyar
November 10, 2017

Rethinking with React 16

Vivek Nayyar

November 10, 2017
Tweet

More Decks by Vivek Nayyar

Other Decks in Technology

Transcript

  1. Rethinking with React 16

  2. Who Am I? Javascript Enthusiast, Web Developer, Software Development Engineer

    - ex Hotstar Vivek Nayyar Twitter: @VivekNayyar09 Medium: @VivekNayyar Github: https://github.com/vivek12345
  3. Core Algorithm Rewrite Stack reconciliation — updates must be completed entirely before

    returning to main thread Fiber reconciliation — updates will be batched in chunks and React will manage the main thread (credit Lin Clark)
  4. Error Boundaries Error boundaries are React components that catch JavaScript

    errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree. Fallback UI card for a component that fails to render and get’s catched inside componentDidCatch
  5. None
  6. Messenger using Error Boundaries

  7. E-Commerce product display page using Error Boundaries

  8. Fragments, Strings and Multiple Elements React render() method can now

    return :- 1) React Elements 2) Arrays, Strings and numbers 3) null
  9. Portals Render children into a DOM node that exists in

    some other DOM heirarchy A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.
  10. Event bubbling in portals An event fired from inside a

    portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree. ➔ A Parent component in #app-root would be able to catch an uncaught, bubbling event from the sibling node #modal-root.
  11. SSR With React 16 React 16 renders faster on the

    server than React 15 ➢ render() becomes hydrate() ➢ More efficient html ➢ Less Strict Client Side Checking ➢ Doesn’t need to be compiled for best performance
  12. How SSR Works in React 15

  13. SSR in React 16 render() gets’s replaced with hydrate() React

    15 to React 16, you will probably come across the following warning in your browser:
  14. React 16 Doesn’t Need To Be Compiled For Best Performance

    ➢ In React 16, this problem has been solved. There is only one call to check process.env.NODE_ENV at the very beginning of React 16
  15. React 16 Supports Streaming Two new API’S ➢ renderToNodeStream ➢

    renderToStaticNodeStream
  16. React 16 renders faster on the server than React 15

  17. Reduced File Size

  18. Ships with a new MIT License