Best practices for sharing form values between multiple forms
Hi everyone
We're currently in the process of refactoring a legacy React application and are looking for best practices for sharing values between multiple forms on a single page.
Use Case
We have a page with six forms, toggled via radio buttons. Each form:
- Queries a different data source
- Has its own unique input fields
- Shares five common fields with the other forms
- The shared fields should persist across form switches. For example, if a user fills out the shared fields in Form A and then switches to Form B, those values should carry over seamlessly.
Current Setup
Right now the forms are completely custom made per screen and Redux is being used to manage all application states. This leads to excessive re-renders and a suboptimal UX/DX - especially with larger, more complex forms.
New Setup
- TanStack Query + Axios for async state management
- TanStack Form + Zod for form state and validation
So far, we’ve refactored two single form pages and are really enjoying the improved developer experience especially with form composition. The UX has also improved drastically.
But we're not sure how to implement this use case cleanly, I would really appreciate some advice.
We're currently in the process of refactoring a legacy React application and are looking for best practices for sharing values between multiple forms on a single page.
Use Case
We have a page with six forms, toggled via radio buttons. Each form:
- Queries a different data source
- Has its own unique input fields
- Shares five common fields with the other forms
- The shared fields should persist across form switches. For example, if a user fills out the shared fields in Form A and then switches to Form B, those values should carry over seamlessly.
Current Setup
Right now the forms are completely custom made per screen and Redux is being used to manage all application states. This leads to excessive re-renders and a suboptimal UX/DX - especially with larger, more complex forms.
New Setup
- TanStack Query + Axios for async state management
- TanStack Form + Zod for form state and validation
So far, we’ve refactored two single form pages and are really enjoying the improved developer experience especially with form composition. The UX has also improved drastically.
But we're not sure how to implement this use case cleanly, I would really appreciate some advice.
