Pinterest Marketing: Your Complete Guide to Pinterest Success
Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by...
Transcript of Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by...
![Page 1: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/1.jpg)
Advanced React –Virtual DOM
AndPerformance
![Page 2: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/2.jpg)
Medium: medium.com/@vzaidmanTwitter: twitter.com/vzaidmanGitHub: github.com/vzaidmanEmail: [email protected]
By: Vitali Zaidman
Web Architect and Blogger at Welldone Software• Work with React since it was released• Worked a lot on performance• Creator and (almost) the sole maintainer of why-did-you-render
![Page 3: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/3.jpg)
Premature OptimizationPerformance is a feature!
![Page 4: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/4.jpg)
Performance Matters!
In a study made by Google:
• Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%
• COOK increased conversions by 7%, decreased bounce rates by 7%, and increased pages per session by 10% when they reduced average page load time by 850 milliseconds
* Make sure your product department is aware of this.
![Page 5: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/5.jpg)
Performance In General
• Consider simulating the environment your users actually use in the real world.Remember that your machine is probably much stronger then that of your average user.
• Consider measuring performance and assigning a score to different versions.It's not easy but it's very valuable to find out if:• Performance actually improves.• You work on the most acute issues.
• Performance optimizations would come naturally to youonce you understand the processes of your application in depth.
![Page 6: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/6.jpg)
Lecture FocusWhat usually cause performance issues:
• Network Issues - Lack of pagination, slow servers, wrong protocols, huge assets, caching, cdns, etc...
• Over-accessing the DOM
• CSS recalculations for huge layouts
• Over-bloating the DOM with elements, events and CSS rules
• iFrames, heavy libraries, and processes that runin parallel to the main application
What we will focus on:
• React Issues – slowness in React’s lifecycles
![Page 7: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/7.jpg)
The DemoThought the lecture we would use the same demo with slight modifications.
![Page 8: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/8.jpg)
React Terminology• React Component
Recipe for React on how to act with acertain part of the Virtual DOM.
• React ElementWhat we get whenReact.createElement(ReactComponent)or it's equivalent JSX version<ReactComponent/> are called.
They are immutable and representa “building block” of the Virtual DOM.
• React Component InstanceAn instance of React Component that is responsible for a React Element’s lifecycle in a specific part of the Virtual DOM.
![Page 9: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/9.jpg)
Virtual DOMWe are going to look at an approximation of how the Virtual DOM works after React
components render to better grasp React best practices and deal with performance issues.
![Page 10: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/10.jpg)
Virtual DOM’s ReconciliationOn a click on “Increase Counter”First step: Calculate a new “snapshot”* of the Virtual DOMby re-rendering all it’s components
Previous Virtual DOM snapshot Next Virtual DOM snapshot
* Not a real thing but helps in grasping the Virtual DOM
![Page 11: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/11.jpg)
On a click on “Increase Counter”Second step: Calculate and update the Real DOM with the changesThird step: Dump these updates to the Real DOM in the most effective way
Virtual DOM’s Reconciliation
Previous Virtual DOM snapshot Next Virtual DOM snapshot
![Page 12: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/12.jpg)
React Component’s lifecycleHow would the following code affect the lifecycle of the ChildComponent?
![Page 13: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/13.jpg)
React Component’s lifecycleGIF Animation
![Page 14: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/14.jpg)
React Component’s lifecycle
ParentComponent re-renders
“child” is a React Element – an immutablebuilding block of the Virtual DOM
GIF Animation
![Page 15: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/15.jpg)
React Component’s lifecycle
ParentComponent re-renders here whenever Demo renders
Child renders here - onceGIF Animation
![Page 16: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/16.jpg)
Reconciliation HeuristicsThere’s potentially a React anti-pattern here. Can you spot it?
GIF Animation
![Page 17: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/17.jpg)
Reconciliation HeuristicsThe problem here is that the Child Component un-mounts and re-mounts on each render.Imagine how can it affect behaviors like Ajax requests in the real world.
GIF Animation
![Page 18: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/18.jpg)
This is because the reconciliation uses a the react component’s hierarchy as aheuristic to keep React Component Instances.
Previous Virtual DOM snapshot Next Virtual DOM snapshot
Reconciliation Heuristics
When a React Element is created from a new React Component,The old instance is unmounted and the new one is mounted.
![Page 19: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/19.jpg)
Reconciliation HeuristicsHow can we achieve this behavior without these re-renders?
GIF Animation
![Page 20: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/20.jpg)
Reconciliation HeuristicsOnly by keeping the Virtual DOM’s hierarchy. (official React docs)
![Page 21: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/21.jpg)
Side note: All The Ways To Be Re-Rendered• Create Element - <ReactComponent/> - React.createElement(ReactComponent)
When a React element is created it (re-)renders(Unless shouldComponentUpdate, React.memo prevent it)
• Set State - this.setState({ count: 0 })When a component changes it’s own state
• Force Update - this.forceUpdate()When a component changes it’s own state
• React Hooks
• useState, useReducer - When the hook’s value is changes
• useContext - When the Context’s value changes
![Page 22: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/22.jpg)
Reconciliation PerformanceIn the example we saw before,When Demo re-renders,
“child” stays the same React ElementIn the new Virtual DOM snapshot.
Or in another words, it equals by reference:
previous child === next child
![Page 23: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/23.jpg)
Reconciliation PerformanceParentComponent, on the other hand, isre-created.
In the new Virtual DOM snapshotit would be a new immutable React Element.
![Page 24: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/24.jpg)
Reconciliation PerformanceWhat about the onClick function?
A new function is generated on each render.
React doesn’t change the event listener on the HTML button.
Instead, it changes the saved onClickfunction that is relayed from the same event listener.
![Page 25: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/25.jpg)
Reconciliation PerformanceWhat if we do the famous trick of moving the function on the class?
The handleClick function is now generated only once, on the first mount of the component.
React never changes what onClick does anymore since
previous onClick === next onClick
![Page 26: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/26.jpg)
Premature OptimizationWhile it saves us a function creation and some operations inside React on each render,
While it may come handy in many cases, in 97% of the cases, saves us so little, that we shouldn’t care.
This is usually a premature optimization.
![Page 27: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/27.jpg)
Reconciliation PerformanceExtracting style objects in this fashion, saves us a deep comparison of each style obj on every render.
7 properties in our case.
It’s also usually a premature optimization.
![Page 28: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/28.jpg)
Performance Issues
From: https://developers.google.com/web/fundamentals/performance/rail
So what actually causes performance issues?
Based on the RAIL Model from Google, we have 100ms from the user’s input to a renderso the user won’t feel a lag.
In these 100ms,these are out of our control:• Task queue• React lifecycle and reconciliation• Pain and layout calculations• Other browser’s housekeeping
So we have around less then ~50msfrom a triggered React input (like onClick)to finishing all the renders.
Virtual DOM’s Reconciliation and DOM update
![Page 29: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/29.jpg)
Performance Issues“Very heavy operations” in React’s lifecycle• Algorithmic / Mathematical calculations• Manipulating data
like filtering, mapping and reducing
![Page 30: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/30.jpg)
Performance IssuesPure components only re-render if one of their props change.
![Page 31: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/31.jpg)
Performance IssuesWhat can we do with very heavy calculations?Memoization of Derived Data• Reselect in Redux - createSelector(selectUsers, selectStats…)• React Hooks - useMemo()• Lodash - _.memoize()• Mobx - @computed• And many others
Web Workers• Asynchronously calculate
in a parallel thread
Avoid Calculating• Calculate on server• Change the data structure
![Page 32: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/32.jpg)
Performance IssuesMany operations in React’s lifecycle• When a change is made high in the application’s hierarchy• Many high order components
•
• When a component re-renders many times• When there’s a lot of instances of a component:
• Long lists• Graphics• Complex UI
Costly operations like:• Accessing the DOM directly• Creation of React Elements
![Page 33: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/33.jpg)
Heavy OperationsRepeated “heavy operations” in React’s lifecycleNotice how re-rendering 10000 div elements takes a long time.Also notice it happens on every click
![Page 34: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/34.jpg)
Pure components only re-render if any of their props changeRegular components re-render on any re-creation of the React element.
Heavy Operations
![Page 35: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/35.jpg)
Pure Components
![Page 36: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/36.jpg)
Can we make the ParentComponent pure instead of HugeList?
Pure Components
![Page 37: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/37.jpg)
No! Because even if ChildComponent would be pure,It would always be a new React Element!
Pure Components
![Page 38: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/38.jpg)
Passing props that are always different from previous props is an anti-pattern.
Not only these components always re-render, they also consume more processing power when testing if they need to re-render.
In some cases these components receive many props and are used across the application.
Pure Components
![Page 40: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/40.jpg)
When React is Not The AnswerHere, instead of using React, I draw a million of pixels using an “offscreenCanvas” which is a canvas that can be used through a webworker. It re-draws every 300ms at-most.
![Page 41: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/41.jpg)
Huge Components
![Page 42: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/42.jpg)
Huge Components
![Page 43: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/43.jpg)
Huge ComponentsBreaking a component into many smaller pure components ensure smaller parts of it actually re-render.
![Page 44: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/44.jpg)
Virtualized ListsMake sure to use virtual lists to only render the rows that are actually seen on the screen.This technique allows displaying lists with thousands of rows.
Check out this great lecture by Brian Vaughn for more information.
Source: https://bvaughn.github.io/forward-js-2017/
![Page 45: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/45.jpg)
Conclusion• Do not optimize prematurely and focus on what’s important
• Always consider what needs to be rendered
• Try to avoid, memoize, or do heavy calculations in web workers.
• Break components into smaller pure components
• Consider using tools other than React for cpecific goals
• See if libraries like React Virtualized already have a solution
![Page 46: Advanced React – Virtual DOM And Performance€¦ · Performance Matters! In a. study made by Google : • Pinterest increased searchengine traffic and sign-ups by 15% when they](https://reader033.fdocuments.us/reader033/viewer/2022050107/5f45679d1cb84e72b854f1c8/html5/thumbnails/46.jpg)
Medium: medium.com/@vzaidmanTwitter: twitter.com/vzaidmanGitHub: github.com/vzaidmanEmail: [email protected]
By: Vitali Zaidman
Web Architect and Blogger at Welldone Software
Thank You!