Agenda - Web Performance - Dev Tools - React Tools

1. Web Performance & Latest in
React
o Govind Vijay
o Roopa Rauniyar

2. Topics
2
Dev tools
Web performance
React tools

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

36. 36
Web performance Theory

37. 37
Web performance Theory

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.

39. 39
Web performance Theory

40. 40
Web performance Theory

41. 41
Web performance Theory

42. 42
Web performance Theory

43. 43
Web performance Theory

44. 44
Web performance Theory

45. 45
Web performance Theory

46. 46
Web performance Theory

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.

48. 48
Web performance Theory

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.

50. 50
Web performance Theory

51. 51
Web performance Theory

52. 52
Dev tools
Debugging

53. 53
Dev tools Debugging
Breakpoints: Conditional, DOM etc.
Live editing
Watch expression
Create a live expression

54. 54
Debugging
React tools

55. 55
React tools Debugging

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

84. Virtualization Fig.
84

85. Virtualization Supporting Libraries
Virtualization can be achieved using libraries like
react-virtualized,
react-window.
85

86. Thank You
86