Skip to content

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

Published:

Before get started

TOC

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


Formik

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

Summary

Slide 30