React 19 - Everything you need to know

Transcript

1. shrutikapoor.dev shrutikapoor08 React 19
2. shrutikapoor.dev shrutikapoor08 React 19 RC
3. shrutikapoor.dev shrutikapoor08 Why this talk?
5. shrutikapoor.dev shrutikapoor08
6. shrutikapoor.dev shrutikapoor08 Everything you need to know about React 19
7. shrutikapoor.dev shrutikapoor08 What’s new? What’s changing? Demo
8. shrutikapoor.dev shrutikapoor08 Convert a form from React 18 to React 19
9. shrutikapoor.dev shrutikapoor08 Convert a form from React 18 to React 19 1. React Actions 2. Hooks - useActionState, useFormStatus
10. Shruti Kapoor Front End @ Slack @shrutikapoor08
11. shrutikapoor.dev shrutikapoor08 #DevJokes
12. shrutikapoor.dev shrutikapoor08 When I say “Knock Knock”, You say ….
13. shrutikapoor.dev shrutikapoor08 Knock Knock
14. shrutikapoor.dev shrutikapoor08 Yah!
15. shrutikapoor.dev shrutikapoor08 Don’t Yahoo, Google!
16. shrutikapoor.dev shrutikapoor08 Knock Knock
17. shrutikapoor.dev shrutikapoor08 Tailwind
18. shrutikapoor.dev shrutikapoor08 Tailwaind relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5 dark:bg-gray-800 dark:border-gray-600 relative inline-flex items-center px-4 py-2 -ml-px text- sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text- gray-700 transition ease-in-out duration-150 dark:bg- gray-800 dark:border-gray-600 dark:text-gray-400
19. shrutikapoor.dev shrutikapoor08 Knock Knock
21. shrutikapoor.dev shrutikapoor08 Know a DevJoke?
22. shrutikapoor.dev shrutikapoor08 Know a DevJoke?
24. shrutikapoor.dev shrutikapoor08 What’s new?
25. shrutikapoor.dev shrutikapoor08 New Features New Hooks New API
26. shrutikapoor.dev shrutikapoor08 New Features
27. shrutikapoor.dev shrutikapoor08 React Actions
28. shrutikapoor.dev shrutikapoor08
29. shrutikapoor.dev shrutikapoor08
30. shrutikapoor.dev shrutikapoor08
31. shrutikapoor.dev shrutikapoor08 Action
32. shrutikapoor.dev shrutikapoor08 Functions that use async transitions
33. shrutikapoor.dev shrutikapoor08 Also supported on the server
34. shrutikapoor.dev shrutikapoor08
35. shrutikapoor.dev shrutikapoor08
36. shrutikapoor.dev shrutikapoor08 React Actions
37. shrutikapoor.dev shrutikapoor08 React Actions React Compiler
39. shrutikapoor.dev shrutikapoor08 Auto Memoization
40. shrutikapoor.dev shrutikapoor08 Optimizes re-renders
41. 1. Skipping re-rendering of children when P a rent upd a tes Optimizations
42. shrutikapoor.dev shrutikapoor08
43. shrutikapoor.dev shrutikapoor08
44. 1. Skipping re-rendering of children when P a rent upd a tes 2. Skipping expensive c a lcul a tions Optimizations
45. shrutikapoor.dev shrutikapoor08 Only memoizes React components and hooks, not every function
46. shrutikapoor.dev shrutikapoor08
48. shrutikapoor.dev shrutikapoor08
49. shrutikapoor.dev shrutikapoor08 No more useMemo and useCallback
51. shrutikapoor.dev shrutikapoor08 FAQs
52. shrutikapoor.dev shrutikapoor08 Question: Do I need to remove useMemo & useCallback now?
53. shrutikapoor.dev shrutikapoor08 Safe to leave it as is
54. shrutikapoor.dev shrutikapoor08 Question: Can React Compiler be used with <React19?
55. shrutikapoor.dev shrutikapoor08 Yes
56. shrutikapoor.dev shrutikapoor08 Question: Is memoization the same between React Compiler and useMemo / useCallback?
57. shrutikapoor.dev shrutikapoor08 No
58. shrutikapoor.dev shrutikapoor08 Question: Can I prevent Compiler from optimizing certain f iles?
59. shrutikapoor.dev shrutikapoor08 Yes
60. shrutikapoor.dev shrutikapoor08 ‘use no memo’
61. shrutikapoor.dev shrutikapoor08 Question: I am seeing issues after using Compiler. What do I do?
62. shrutikapoor.dev shrutikapoor08
63. shrutikapoor.dev shrutikapoor08 1. Are you breaking Rules of React? 2. Try f ixing the error with “use no memo” 3. Provide feedback in GitHub Discussions.
64. shrutikapoor.dev shrutikapoor08 React Actions React Compiler
65. shrutikapoor.dev shrutikapoor08 New Hooks
66. shrutikapoor.dev shrutikapoor08 •useFormSt a tus New Hooks
67. shrutikapoor.dev shrutikapoor08 •useFormSt a tus - info of l a st form submission New Hooks
68. shrutikapoor.dev shrutikapoor08
69. shrutikapoor.dev shrutikapoor08 Use only inside a <form>’s child
70. shrutikapoor.dev shrutikapoor08 Does not work
71. This Works
72. shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te New Hooks
73. shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te: upd a te st a te b a sed on a ction New Hooks
74. shrutikapoor.dev shrutikapoor08
75. shrutikapoor.dev shrutikapoor08
76. shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te •useOptimistic New Hooks
77. shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te •useOptimistic: optimistic a lly upd a te UI New Hooks
78. shrutikapoor.dev shrutikapoor08
79. shrutikapoor.dev shrutikapoor08 New API
80. shrutikapoor.dev shrutikapoor08 • use New API
81. shrutikapoor.dev shrutikapoor08 • use: re a d resources New API
82. shrutikapoor.dev shrutikapoor08 Read context
83. shrutikapoor.dev shrutikapoor08 Read promises
84. shrutikapoor.dev shrutikapoor08 Can only be called in render
85. shrutikapoor.dev shrutikapoor08 What’s new?
86. shrutikapoor.dev shrutikapoor08 •Fe a tures - Re a ct Compiler, Re a ct Actions •Hooks - useActionSt a te, useFormSt a tus, useOptimistic •API - use What’s new in React 19?
87. shrutikapoor.dev shrutikapoor08 What’s changed?
88. shrutikapoor.dev shrutikapoor08 ref is a prop
89. shrutikapoor.dev shrutikapoor08 No more useMemo, useCallback
90. • Better errors • Render <Context> inste a d of <Context.Provider> • Ref cle a nup • Met a d a t a Other updates
92. • Better errors • Render <Context> inste a d of <Context.Provider> • Ref cle a nup • Met a d a t a • Stylesheets Other updates
94. shrutikapoor.dev shrutikapoor08 Demo
95. shrutikapoor.dev shrutikapoor08 Recap
96. shrutikapoor.dev shrutikapoor08 Forms are getting better support
97. shrutikapoor.dev shrutikapoor08 Easier to manage pending states
98. shrutikapoor.dev shrutikapoor08 No more useMemo, useCallback
99. shrutikapoor.dev shrutikapoor08 No more forwardRefs
100. New Hooks useFormSt a tus useActionSt a te useOptimisticUI New Fe a tures Re a ct Actions Re a ct Compiler Upd a tes Met a d a t a Stylesheets Error logging Prelo a ding APIs P Server API Re a ct Server Components Client API st a rtTr a nsition a ccepts a sync functions
101. shrutikapoor.dev shrutikapoor08 If you are new to React..
102. shrutikapoor.dev shrutikapoor08
103. How does a developer cheer? shrutikapoor.dev shrutikapoor08 [“hip”, “hip”]
104. ❤ Thank You shrutikapoor.dev shrutikapoor08
105. • Components a nd Hooks must be pure – Purity m a kes your code e a sier to underst a nd, debug, a nd a llows Re a ct to a utom a tic a lly optimize your components a nd hooks correctly. • Re a ct c a lls Components a nd Hooks – Re a ct is responsible for rendering components a nd hooks when necess a ry to optimize the user experience. • Rules of Hooks – Hooks a re de f ined using J a v a Script functions, but they represent a speci a l type of reus a ble UI logic with restrictions on where they c a n be c a lled. Rules of React
106. shrutikapoor.dev shrutikapoor08 Client Side updates
107. shrutikapoor.dev shrutikapoor08 Server components
108. • Is v a lid, sem a ntic J a v a Script Assumptions
109. • Is v a lid, sem a ntic J a v a Script • Properties a re de f ined before a ccessing them Assumptions
110. • Is v a lid, sem a ntic J a v a Script • Properties a re de f ined before a ccessing them • Rules of Re a ct a re followed Assumptions