meet.js Online #1

What is React suspense and should we use it now?

Transcript

1. meet.js Online #1 19.11.2020
2. CZY MNIE WIDAĆ? CZY MNIE SŁYCHAĆ?
3. HEJ!
4. @PatrykOmiotek
5. @PatrykOmiotek
6. HEJ!
7. REACT SUSPENSE
8. CO WIEMY O SUSPENSE? • Komponent pojawił się w wersji 16.6 • Obszary wykorzystania: performance, data fetching • Nie nadaje się jeszcze do wykorzystania komercyjnego?
9. SPOILER ALERT
10. PROBLEM • performance • data fetching
11. PROBLEM • performance
12. CO WIEMY O SUSPENSE?
13. We’ve build a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority-updates TIME SLICING
14. TIME SLICING • React doesn’t block the thread while rendering • Feels synchronous if the device is fast • Feels responsive if the device is slow • Only the final rendered state is displayed • Declarative component model
15. TIME SLICING
16. TIME SLICING
17. TIME SLICING
18. TIME SLICING
19. TIME SLICING
20. TIME SLICING
21. TIME SLICING
22. TIME SLICING
23. PROBLEM • performance
24. SUSPENSE • data fetching
25. SUSPENSE What Suspense is not?
26. WHAT IS NOT? • Not a data fetching implementation • Not a ready-to-use client • Doesn’t couple data fetching to the view layer
27. WHAT LETS YOU DO? • lets data fetching libraries deeply integrate with React • lets you orchestrate intentionally designed loading states • helps you avoid race conditions
28. USING IN PRACTICE • Facebook uses Relay integration with Suspense in production • Over the next several months, many libraries will appear with different takes on Suspense APIs
29. SUSPENSE We’ve build a generic way for components to suspend rendering while they load asynchronous data
30. SUSPENSE • Pause any data update until the data is ready • Add async data to any component without “plumbing” • On a fast network, render after the whole tree is ready • On a slow network, precisely control the loading states • There’s both a high-level and low-level API
31. SUSPENSE
32. SUSPENSE
33. SUSPENSE
34. SUSPENSE
35. SUSPENSE
36. SUSPENSE
37. TIME SLICING AND SUSPENSE With vast differences in computing power and network speed how do we deliver by the best user-experience for everyone
38. TIME SLICING AND SUSPENSE
39. TIME SLICING AND SUSPENSE
40. ENABLING CONCURRENT MODE
41. ASYNC RENDERING WITH REACT • Adapt to user’s device and network • Fast interactions feel instant • Slower interactions feel sponsive
42. TRADITIONAL APPROACHES VS SUSPENSE • Fetch-on-render • Fetch-then-render • Render-as-you-fetch
43. KODZIK • Kodzik, kodzik, kodzik
44. CZEGO SIĘ DZISIAJ DOWIEDZIELIŚMY? • Suspense nie jest przeznaczony do produkcji • Umożliwia code splitting • Umożliwia inne podejście do pobierania danych
45. PODZIĘKOWANIE
46. @PatrykOmiotek
47. CZAS NA WASZE PYTANIA