Slides for Seattle ReactJS Meetup talk "React Suspense for People in a Hurry"

1. React Suspense for people in a hurry
@trivikram #SeattleReactJS 1

2. Thank you SeattleReactJS
@trivikram #SeattleReactJS 2
Oct’18: React Component State
vs Redux vs MobX vs Context
Dec’18: Will React Hooks
replace Redux?

3. Trivikram Kamat
@trivikram #SeattleReactJS 3
Software Development Engineer
trivikr@amazon.com
@trivikram
@trivikr

4. What’s my name again?
@trivikram #SeattleReactJS 4
Tree Weak Rum
Tri vik ram
+ +
. .

5. What is this talk going to cover?
•Bundling, Code Splitting and import
•React Suspense and lazy()
•Go through an example app
@trivikram #SeattleReactJS 5
Thank YouTuber Harry Wolff whose tutorials helped me prepare this talk

6. What is bundling?
•Merging multiple JavaScript files into a
single file called “bundle”
•Tools like Webpack, Browserify, Parcel
etc do it for you
@trivikram #SeattleReactJS 6

7. Bundling example
@trivikram #SeattleReactJS 7
// math.js
export function add(a, b) {
return a + b;
}
// app.js
import { add } from “./math.js”
console.log(add(16, 26)); //42
// bundle.js
function add(a, b) {
return a + b;
}
console.log(add(16, 26)); //42

8. What is Code Splitting?
• Bundling is great, but as your app grows, bundle will
grow too - especially if you include large 3p libraries
• To avoid that, we’ve to now “split” the bundle 😜
• Code Splitting – creates multiple bundles for you which
can dynamically loaded at runtime
• Lazy-loading – reduce the amount of code needed during
the initial load, “lazy-load” other things if/when required.
@trivikram #SeattleReactJS 8

9. What is non-dynamic (static) import?
• import { add } from “./math.js”
• You must specify what to import/export at compile time
• The import declaration can only appear at the top level of a module,
so you can’t import modules inside other statements
• The module specifier ”./math.js” cannot be computed at runtime
@trivikram #SeattleReactJS 9

10. What is dynamic import?
const fileName = "./math.js";
import(fileName)
.then(m => m.add(16, 26));
@trivikram #SeattleReactJS 10

11. What is dynamic import?
(async () => {
const fileName = "./math.js";
const m = await import(fileName);
m.add(16, 26);
})();
@trivikram #SeattleReactJS 11

12. Dynamic import is Stage-3 proposal
• Note that dynamic import is a TC39 Stage-3 proposal
(not a standard yet) https://github.com/tc39/proposal-
dynamic-import
• However, it’s supported in Chrome, Safari, Firefox,
TypeScript, babel, NodeJS (10+)
@trivikram #SeattleReactJS 12

13. Dynamic import benefits
Benefit 1: loading on demand
button.addEventListener("click",
() => {
import("./math.js")
.then (m => m.add(16, 26));
});
@trivikram #SeattleReactJS 13

14. Dynamic import benefits
Benefit 2: loading based on conditions
if (someCondition()) {
import("./math.js")
.then (m => m.add(15, 27));
}
@trivikram #SeattleReactJS 14

15. Dynamic import benefits
Benefit 3: compute module specifiers
import(`./${mathModule}.js`)
.then(m => m.add(14, 28));
@trivikram #SeattleReactJS 15

16. React.lazy() 😴
lets you render a dynamic import as a regular component
@trivikram #SeattleReactJS 16

17. Fallback UI
@trivikram #SeattleReactJS 17

18. Suspense 🤔
@trivikram #SeattleReactJS 18
If the module containing Bar component is not yet loaded by the time
Foo component gets rendered, then we must show some fallback
content - like Loading indicator. That’s what Suspense does.

19. Suspense 🤔
@trivikram #SeattleReactJS 19

20. Demo!
@trivikram #SeattleReactJS 20

21. Demo!
@trivikram #SeattleReactJS 21

22. Demo!
@trivikram #SeattleReactJS 22

23. Demo!
@trivikram #SeattleReactJS 23

24. Demo!
@trivikram #SeattleReactJS 24

25. Demo!
@trivikram #SeattleReactJS 25

26. Demo!
@trivikram #SeattleReactJS 26

27. Demo!
@trivikram #SeattleReactJS 27

28. Demo!
@trivikram #SeattleReactJS 28

29. Demo!
@trivikram #SeattleReactJS 29

30. Demo!
@trivikram #SeattleReactJS 30

31. Demo!
@trivikram #SeattleReactJS 31

32. Demo!
@trivikram #SeattleReactJS 32
High res image loading
Low res image available

33. Demo!
@trivikram #SeattleReactJS 33

34. When should I use Suspense?
@trivikram #SeattleReactJS 34
There is a single source of truth called
“it depends”

35. Summary
@trivikram #SeattleReactJS 35
• We learnt about
• Bundling – merging multiple JavaScript files into a single “bundle”
• Code-Splitting – creating multiple bundles which can be
dynamically loaded at runtime
• Dynamic import – import only when required
• React
• React.lazy() – render a dynamic import as a regular component
• Suspense – show fallback content for React.lazy component
• We went through a demo to see how all this works

36. Thank you for listening!
@trivikram #SeattleReactJS 36
Trivikram Kamat
trivikr@amazon.com
@trivikram
@trivikr
GitHub: https://github.com/trivikr/react-suspense-demo