Rethinking with React 16

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
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