React 19 - Everything you need to know

Slide 1

Slide 1 text

shrutikapoor.dev shrutikapoor08 React 19

Slide 2

Slide 2 text

shrutikapoor.dev shrutikapoor08 React 19 RC

Slide 3

Slide 3 text

shrutikapoor.dev shrutikapoor08 Why this talk?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

shrutikapoor.dev shrutikapoor08

Slide 6

Slide 6 text

shrutikapoor.dev shrutikapoor08 Everything you need to know about React 19

Slide 7

Slide 7 text

shrutikapoor.dev shrutikapoor08 What’s new? What’s changing? Demo

Slide 8

Slide 8 text

shrutikapoor.dev shrutikapoor08 Convert a form from React 18 to React 19

Slide 9

Slide 9 text

shrutikapoor.dev shrutikapoor08 Convert a form from React 18 to React 19 1. React Actions 2. Hooks - useActionState, useFormStatus

Slide 10

Slide 10 text

Shruti Kapoor Front End @ Slack @shrutikapoor08

Slide 11

Slide 11 text

shrutikapoor.dev shrutikapoor08 #DevJokes

Slide 12

Slide 12 text

shrutikapoor.dev shrutikapoor08 When I say “Knock Knock”, You say ….

Slide 13

Slide 13 text

shrutikapoor.dev shrutikapoor08 Knock Knock

Slide 14

Slide 14 text

shrutikapoor.dev shrutikapoor08 Yah!

Slide 15

Slide 15 text

shrutikapoor.dev shrutikapoor08 Don’t Yahoo, Google!

Slide 16

Slide 16 text

shrutikapoor.dev shrutikapoor08 Knock Knock

Slide 17

Slide 17 text

shrutikapoor.dev shrutikapoor08 Tailwind

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

shrutikapoor.dev shrutikapoor08 Knock Knock

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

shrutikapoor.dev shrutikapoor08 Know a DevJoke?

Slide 22

Slide 22 text

shrutikapoor.dev shrutikapoor08 Know a DevJoke?

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

shrutikapoor.dev shrutikapoor08 What’s new?

Slide 25

Slide 25 text

shrutikapoor.dev shrutikapoor08 New Features New Hooks New API

Slide 26

Slide 26 text

shrutikapoor.dev shrutikapoor08 New Features

Slide 27

Slide 27 text

shrutikapoor.dev shrutikapoor08 React Actions

Slide 28

Slide 28 text

shrutikapoor.dev shrutikapoor08

Slide 29

Slide 29 text

shrutikapoor.dev shrutikapoor08

Slide 30

Slide 30 text

shrutikapoor.dev shrutikapoor08

Slide 31

Slide 31 text

shrutikapoor.dev shrutikapoor08 Action

Slide 32

Slide 32 text

shrutikapoor.dev shrutikapoor08 Functions that use async transitions

Slide 33

Slide 33 text

shrutikapoor.dev shrutikapoor08 Also supported on the server

Slide 34

Slide 34 text

shrutikapoor.dev shrutikapoor08

Slide 35

Slide 35 text

shrutikapoor.dev shrutikapoor08

Slide 36

Slide 36 text

shrutikapoor.dev shrutikapoor08 React Actions

Slide 37

Slide 37 text

shrutikapoor.dev shrutikapoor08 React Actions React Compiler

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

shrutikapoor.dev shrutikapoor08 Auto Memoization

Slide 40

Slide 40 text

shrutikapoor.dev shrutikapoor08 Optimizes re-renders

Slide 41

Slide 41 text

1. Skipping re-rendering of children when P a rent upd a tes Optimizations

Slide 42

Slide 42 text

shrutikapoor.dev shrutikapoor08

Slide 43

Slide 43 text

shrutikapoor.dev shrutikapoor08

Slide 44

Slide 44 text

1. Skipping re-rendering of children when P a rent upd a tes 2. Skipping expensive c a lcul a tions Optimizations

Slide 45

Slide 45 text

shrutikapoor.dev shrutikapoor08 Only memoizes React components and hooks, not every function

Slide 46

Slide 46 text

shrutikapoor.dev shrutikapoor08

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

shrutikapoor.dev shrutikapoor08

Slide 49

Slide 49 text

shrutikapoor.dev shrutikapoor08 No more useMemo and useCallback

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

shrutikapoor.dev shrutikapoor08 FAQs

Slide 52

Slide 52 text

shrutikapoor.dev shrutikapoor08 Question: Do I need to remove useMemo & useCallback now?

Slide 53

Slide 53 text

shrutikapoor.dev shrutikapoor08 Safe to leave it as is

Slide 54

Slide 54 text

shrutikapoor.dev shrutikapoor08 Question: Can React Compiler be used with

Slide 55

Slide 55 text

shrutikapoor.dev shrutikapoor08 Yes

Slide 56

Slide 56 text

shrutikapoor.dev shrutikapoor08 Question: Is memoization the same between React Compiler and useMemo / useCallback?

Slide 57

Slide 57 text

shrutikapoor.dev shrutikapoor08 No

Slide 58

Slide 58 text

shrutikapoor.dev shrutikapoor08 Question: Can I prevent Compiler from optimizing certain f iles?

Slide 59

Slide 59 text

shrutikapoor.dev shrutikapoor08 Yes

Slide 60

Slide 60 text

shrutikapoor.dev shrutikapoor08 ‘use no memo’

Slide 61

Slide 61 text

shrutikapoor.dev shrutikapoor08 Question: I am seeing issues after using Compiler. What do I do?

Slide 62

Slide 62 text

shrutikapoor.dev shrutikapoor08

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

shrutikapoor.dev shrutikapoor08 React Actions React Compiler

Slide 65

Slide 65 text

shrutikapoor.dev shrutikapoor08 New Hooks

Slide 66

Slide 66 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus New Hooks

Slide 67

Slide 67 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus - info of l a st form submission New Hooks

Slide 68

Slide 68 text

shrutikapoor.dev shrutikapoor08

Slide 69

Slide 69 text

shrutikapoor.dev shrutikapoor08 Use only inside a ’s child

Slide 70

Slide 70 text

shrutikapoor.dev shrutikapoor08 Does not work

Slide 71

Slide 71 text

This Works

Slide 72

Slide 72 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te New Hooks

Slide 73

Slide 73 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te: upd a te st a te b a sed on a ction New Hooks

Slide 74

Slide 74 text

shrutikapoor.dev shrutikapoor08

Slide 75

Slide 75 text

shrutikapoor.dev shrutikapoor08

Slide 76

Slide 76 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te •useOptimistic New Hooks

Slide 77

Slide 77 text

shrutikapoor.dev shrutikapoor08 •useFormSt a tus •useActionSt a te •useOptimistic: optimistic a lly upd a te UI New Hooks

Slide 78

Slide 78 text

shrutikapoor.dev shrutikapoor08

Slide 79

Slide 79 text

shrutikapoor.dev shrutikapoor08 New API

Slide 80

Slide 80 text

shrutikapoor.dev shrutikapoor08 • use New API

Slide 81

Slide 81 text

shrutikapoor.dev shrutikapoor08 • use: re a d resources New API

Slide 82

Slide 82 text

shrutikapoor.dev shrutikapoor08 Read context

Slide 83

Slide 83 text

shrutikapoor.dev shrutikapoor08 Read promises

Slide 84

Slide 84 text

shrutikapoor.dev shrutikapoor08 Can only be called in render

Slide 85

Slide 85 text

shrutikapoor.dev shrutikapoor08 What’s new?

Slide 86

Slide 86 text

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?

Slide 87

Slide 87 text

shrutikapoor.dev shrutikapoor08 What’s changed?

Slide 88

Slide 88 text

shrutikapoor.dev shrutikapoor08 ref is a prop

Slide 89

Slide 89 text

shrutikapoor.dev shrutikapoor08 No more useMemo, useCallback

Slide 90

Slide 90 text

• Better errors • Render inste a d of • Ref cle a nup • Met a d a t a Other updates

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

• Better errors • Render inste a d of • Ref cle a nup • Met a d a t a • Stylesheets Other updates

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

shrutikapoor.dev shrutikapoor08 Demo

Slide 95

Slide 95 text

shrutikapoor.dev shrutikapoor08 Recap

Slide 96

Slide 96 text

shrutikapoor.dev shrutikapoor08 Forms are getting better support

Slide 97

Slide 97 text

shrutikapoor.dev shrutikapoor08 Easier to manage pending states

Slide 98

Slide 98 text

shrutikapoor.dev shrutikapoor08 No more useMemo, useCallback

Slide 99

Slide 99 text

shrutikapoor.dev shrutikapoor08 No more forwardRefs

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

shrutikapoor.dev shrutikapoor08 If you are new to React..

Slide 102

Slide 102 text

shrutikapoor.dev shrutikapoor08

Slide 103

Slide 103 text

How does a developer cheer? shrutikapoor.dev shrutikapoor08 [“hip”, “hip”]

Slide 104

Slide 104 text

❤ Thank You shrutikapoor.dev shrutikapoor08

Slide 105

Slide 105 text

• 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

Slide 106

Slide 106 text

shrutikapoor.dev shrutikapoor08 Client Side updates

Slide 107

Slide 107 text

shrutikapoor.dev shrutikapoor08 Server components

Slide 108

Slide 108 text

• Is v a lid, sem a ntic J a v a Script Assumptions

Slide 109

Slide 109 text

• Is v a lid, sem a ntic J a v a Script • Properties a re de f ined before a ccessing them Assumptions

Slide 110

Slide 110 text

• 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

Slide 111

Slide 111 text

111