Skip to content

[Summary] Handling React Form states in complex back-office application


Before get started


Why I tried to use React Context for handling form state

Slide 2

The problem when you use Context as your global store

Slide 3

Slide 4

Using React Context more efficiently

Slide 5

Isolate state & debounce

Slide 6

Controlled & Uncontrolled Component

Slide 7

Dividing formState Context & dispatch Context

Slide 8

It wouldn’t be a problem to develop the application’s form with an adequate performance with all the above methods. But for too complicated form, still, there will be a performance issue. Should I give up using Context API then? Or should I use other form management libraries?

React Context + useImperativeHandle hook

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

React Form Libraries

Slide 16

Slide 17


Slide 18

Slide 19 Slide 20

React Hook Form

Slide 21

Slide 22

Slide 23

Slide 24

Caution when you are using RHF

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29


Slide 30