Tanstack query + React hook form
Hi! I have a question about managing form state with React Hook Form (RHF) alongside Tanstack Query's optimistic updates.
My use case:
- I have a nested form with modules (each module has roles, each role has tasks)
- Each CRUD operation (create/update/delete module, role, task) is an immediate API request
- I'm using RHF's useFieldArray for rendering the fields
- Form values are synced with server state using useForm's
Current approach:
1. I'm only managing state through React Query's cache (optimistic updates)
2. Not using RHF's useFieldArray methods (append, remove, etc.)
3. Form stays in sync automatically because it reads from query data
Is this a correct approach? Should I also be managing RHF's state with append/remove, or is updating the query cache sufficient since the form values are derived from it?
Thanks!
My use case:
- I have a nested form with modules (each module has roles, each role has tasks)
- Each CRUD operation (create/update/delete module, role, task) is an immediate API request
- I'm using RHF's useFieldArray for rendering the fields
- Form values are synced with server state using useForm's
valuesCurrent approach:
1. I'm only managing state through React Query's cache (optimistic updates)
2. Not using RHF's useFieldArray methods (append, remove, etc.)
3. Form stays in sync automatically because it reads from query data
Is this a correct approach? Should I also be managing RHF's state with append/remove, or is updating the query cache sufficient since the form values are derived from it?
Thanks!
