Computed Fields for UI Display and Submit Data

Hello TanStack!

I have a common scenario: a "total" field (e.g., "Calories") that depends on 3 other input fields ("Protein", "Fat", "Carbs").

My goal:
1. "Calories" updates and displays reactively as inputs change.
2. "Calories" value is correctly included when the form is submitted.
3. Ideally, avoid using

useEffect

useEffect

to manage "Calories" as an explicit form state field, to keep the form's internal state minimal.

The challenge is that without

useEffect

useEffect

fieldApi.setValue()

fieldApi.setValue()

, I find myself computing "Calories" once for display in render, and then again in

onSubmit

onSubmit

for the payload. Is this "double computation" the expected pattern in TanStack Form for non-managed, reactive derived values, or is there a cleaner way to achieve this without

useEffect

useEffect

TanStack•9mo ago•

2 replies

brilliant-lime

Computed Fields for UI Display and Submit Data

Hello TanStack!

useEffect

useEffect

to manage "Calories" as an explicit form state field, to keep the form's internal state minimal.

The challenge is that without

useEffect

useEffect

fieldApi.setValue()

fieldApi.setValue()

, I find myself computing "Calories" once for display in render, and then again in

onSubmit

onSubmit

for the payload. Is this "double computation" the expected pattern in TanStack Form for non-managed, reactive derived values, or is there a cleaner way to achieve this without

useEffect

useEffect

Computed Fields for UI Display and Submit Data

Computed Fields for UI Display and Submit Data

Similar Threads