Web Performance & Latest in React
Download as PPTX, PDF0 likes104 views
The document discusses various techniques for optimizing web performance and React applications. It covers topics like loading time, rendering time, dev tools, React tools, the latest features in React 17 and 18 like the new root API and startTransition API. It also discusses best practices for performance optimization in React like using pure components, React.memo, lazy loading, throttling events, debouncing events, and virtualization. Code snippets are provided as examples for some of these techniques.
More Related Content
Similar to Web Performance & Latest in React (20)
More from Talentica Software (20)
Web Performance & Latest in React
- 1. Web Performance & Latest in React o Govind Vijay o Roopa Rauniyar
- 3. 3 Theory Loading time Rendering time Web performance Lighthouse
- 4. 4 Web performance Loading time (Remove unused code)
- 5. 5 Web performance Loading time (Remove unused code)
- 6. 6 Web performance Loading time (Remove unused code)
- 7. 7 Web performance Loading time (Remove unused code)
- 8. 8 Web performance Loading time (Remove unused code)
- 9. 9 Web performance Loading time (Remove unused code)
- 10. 10 Web performance Loading time (Remove unused code)
- 11. 11 Web performance Loading time (Remove unused code)
- 12. 12 Web performance Loading time (Remove unused code)
- 13. 13 Web performance Loading time (Remove unused code)
- 14. 14 Web performance Loading time (Remove unused code)
- 15. 15 Web performance Loading time (Code splitting)
- 16. 16 Web performance Loading time (Code splitting)
- 17. 17 Web performance Loading time (Code splitting)
- 18. 18 Web performance Loading time (Code splitting)
- 19. 19 Web performance Loading time (Code splitting)
- 20. 20 Web performance Loading time (Code splitting)
- 21. 21 Web performance Loading time (Tree shaking) Keeping Babel from transpiling ES6 modules to CommonJS modules • Tree shaking is much more difficult to do for CommonJS modules. Tell webpack about side effects Import only what we need
- 22. 22 Web performance Loading time (Tree shaking)
- 23. 23 Web performance Loading time (Tree shaking)
- 24. 24 Web performance Rendering time
- 25. 25 Web performance Rendering time
- 26. 26 Web performance Rendering time
- 27. 27 Web performance Rendering time
- 28. 28 Web performance Rendering time
- 29. 29 Web performance Rendering time (Rasterizing)
- 30. 30 Web performance Rendering time (Composting)
- 31. 31 Web performance Rendering time (Composting)
- 32. 32 Web performance Rendering time (Composting) If certain parts of a page that should be separate layer (like slide-in side menu) is not getting one, then you can hint to the browser by using will-change attribute in CSS.
- 33. 33 Web performance Rendering time Avoid layout changes wherever possible Layout is almost always scoped to the entire document. If you have a lot of elements, it’s going to take a long time to figure out the locations and dimensions of them all.
- 34. 34 Web performance Rendering time Avoid forced synchronous layouts
- 35. 35 Web performance Rendering time Avoid layout thrashing
- 38. 38 Web performance Theory Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- 47. 47 Web performance Theory First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
- 49. 49 Web performance Theory Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
- 53. 53 Dev tools Debugging Breakpoints: Conditional, DOM etc. Live editing Watch expression Create a live expression
- 56. Latest in React & Best Practices for performance optimization
- 57. 57 Latest in React & Best Practices for performance optimization
- 58. React 17 No new developer-facing features primarily focused on making it easier to upgrade React itself. It makes it easier to embed React into apps built with other technologies It’s possible to use two versions of React on the page Supports new JSX Transform 58
- 59. Old JSX transform • The old JSX transform turned JSX into React.createElement(...) calls Source Code Old JSX Transform 59
- 60. New JSX transform • original code did not need to import React to use JSX anymore. • But we would still need to import React in order to use Hooks or other exports that React provides. 60
- 61. Diagrammatical Difference React will no longer attach event handlers at the document level under the hood. Instead, it will attach them to the root DOM container into which your React tree is rendered 61
- 62. React 18 Features The New Root API startTransition API Strict Effects coming to Strict Mode SSR Improvements Suspense List useDeferredValue • Not yet released • Alpha version Available today • When it’s released, React 18 will include out-of-the-box improvements. • React 18 supports concurrent rendering 62
- 63. New Root API 63 Current Support ReactDOM.render(<App/>,document.getElementById('root’)); Upcoming
- 64. startTransition API • This helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates at the same time. • This API provides a way to differentiate between quick updates and delayed updates. The delayed update(i.e. transition of one UI view to another) is termed as Transition Updates. • For urgent updates like typing, hover, clicking, we call props/functions usually like this : • For non-urgent or heavy UI updates, we can wrap it in a startTransition API as : 64
- 65. Strict Effects coming to Strict Mode • React18 will ship <StrictMode /> along with Strict Effects Mode now. Just like Strict Mode, this would be for development builds and improved DX. • When a component is wrapped in Strict Effects, React will make sure to "intentionally" run side-effects twice to detect unusual behaviour/pattern 65
- 66. SSR Improvements • SSR had to load the entire page before it can start hydrating page. • This changes in React18, now we can break React components into smaller chunks using <Suspense />. 66
- 67. Suspense List • Another React 18 concurrent feature, which "orchestrates" the order in which heavy data fetched components appear on the screen. • A <SuspenseList /> takes in revealOrder prop with values forward, backward or together 67
- 68. useDeferredValue • useDeferredValue takes in a state value, a timeout in milliseconds and returns a "deferred version" of that value. This value lags by the provided timeout seconds. 68
- 69. Code Snippet 69
- 70. React Best Practices for performance Optimization • Use React Pure Components to reduce Re-rendering • Use React.memo for Component Memorization • Using Lazy Loading of React Components • Throttling Events • Debouncing Events • Virtualization 70
- 71. Pure Components • Re-rendering can be reduced using Pure components • PureComponents take care of shouldComponentUpdate— it does the shallow comparison on the state and props data. • It compares previous props and state to the next and if not equal then only re-renders. • Comparing primitive and object references is a cheaper operation than updating the component view. 71
- 72. Code Snippet 72
- 73. React.memo • React.memo is a higher-order component. • It is similar to a PureComponent, but PureComponent belongs to the class implementation for Component, whereas “memo” is used for the creation of functional components. • It memorizes the output from the last execution for a certain input prop and boosts the application performance. 73
- 74. Code Snippet 74
- 75. Lazy Loading All the main components and the external dependencies are merged into a single file and sent over the network to have the web application up and running. This saves a lot of network calls, but also leads to a problem where this single file becomes a large file and consumes lots of network bandwidth. The application keeps waiting for this large file to be loaded and executed, so delays in transmission of this file over the network lead to higher rendering time for the application. 75
- 76. Resolution using Lazy Loading • To resolve this problem, we can incorporate the concept of code splitting. • Webpack supports code splitting. • Loading on runtime reduces the size of the initial bundle. • Suspense and lazy used for supporting this concept. 76
- 77. Code Snippet (Example 1) 77
- 78. Code Snippet (Example 2) 78
- 79. Throttling Events Throttling means delaying function execution. It ensures that the function will be called at least once in a specific time period. It means that it will prevent a function from running if it has run recently. It ensures that the function runs regularly in fixed intervals. 79
- 80. When to use Throttling ? • In the case of page scrolling, instead of triggering the scroll event too frequently, we delay the event for some time so that multiple events can be stacked together. • When we have infinite scroll and the data has to be fetched as the user approaches the bottom of the page, we can use throttling. • If throttling is not used, each page scroll towards the bottom of the page will trigger multiple events, and multiple calls to the network are triggered, leading to performance concerns. 80
- 81. Debouncing Concepts • Debouncing refers to ignoring the event handler call until the calls have stopped for a certain amount of time. • Let's imagine that we have an event with a debounce time of one second. The event handler for that event will be triggered after one second, once the user stops triggering the event. 81
- 82. Supporting Library • We can use third-party libraries to implement and use the throttling and debouncing features. One such library is throttle-debounce. 82
- 83. Virtualization • When we have large list to render it overload the DOM and performance hampers. • To overcome this issue virtualization came into picture. • “virtualized list” meaning that only the visible rows are rendered. • This will increase the performance in a way that DOM have only that list items which is currently visible in the scroll window. 83
- 85. Virtualization Supporting Libraries Virtualization can be achieved using libraries like react-virtualized, react-window. 85
- 86. Thank You 86