The React docs state the following:
You can use hidden form fields to provide data to the
<form>’s action.
The Server Action will be called with the hidden form field data as an
instance of FormData.
…and:
In lieu of using hidden form fields to provide data to the
<form>’s
action, you can call the bind method to supply it with extra arguments.
Here is the code example they use:
import { updateCart } from './lib.js';
function AddToCart({productId}) {
async function addToCart(formData) {
'use server'
const productId = formData.get('productId')
await updateCart(productId)
}
return (
<form action={addToCart}>
<input type="hidden" name="productId" value={productId} />
<button type="submit">Add to Cart</button>
</form>
)
}
Using the example above, can we not just pass in the productId using an intermediary async function (see below)? If not, why not?
Attempt at passing in data via an intermediary function:
import { updateCart } from './lib.js';
function AddToCart({productId}) {
async function addToCart(formData, productId) {
'use server'
await updateCart(productId)
}
async function formAction(formData) {
// ...
await addToCart(formData, productId);
}
return (
<form action={formAction}>
<input type="hidden" name="productId" value={productId} />
<button type="submit">Add to Cart</button>
</form>
)
}
There is an example in the React docs, under <form>, showing the use of an intermediary async function, so it should technically work.
I do not understand why they mention hidden form fields and bind, if an intermediary closure can be used instead.
My initial guess is that a form will not be progressively enhanced (i.e. usable without JS) if the Server Action is not passed in directly. Though I am not sure if that is the only reason.
Relevant docs snippet:
Passing a Server Action to
<form action>allow users to submit forms
without JavaScript enabled or before the code has loaded.
Yes, you can use an intermediary async function to pass the productId in your example, and technically it should work. However, there are specific reasons why the React documentation suggests using hidden inputs or the bind method instead of relying on this pattern:
Your intermediary function approach relies on JavaScript closures. In your example:
import { updateCart } from './lib.js';
function AddToCart({ productId }) {
async function addToCart(formData, productId) {
'use server';
await updateCart(productId);
}
async function formAction(formData) {
await addToCart(formData, productId);
}
return (
<form action={formAction}>
<input type="hidden" name="productId" value={productId} />
<button type="submit">Add to Cart</button>
</form>
);
}
Why the Intermediary Async Function Works:
The formAction function is passed to the ‘s action attribute, and this function can access both the formData and the productId due to JavaScript’s closure behavior. Since productId is in the outer scope of formAction, it can be passed to addToCart.
React documentation recommends using hidden inputs or the bind method to provide additional data to a ‘s server action because these methods ensure that the data is explicitly included in the FormData sent with the form submission, which aligns with the FormData API’s key-value format. Hidden inputs guarantee that data is always serialized and submitted with the form, even in environments where JavaScript is disabled or where forms are processed without JavaScript. This approach is more reliable and compatible across different contexts, such as server-side rendering. Additionally, using hidden inputs or bind creates more predictable and maintainable code, avoiding the complexity and potential pitfalls of closures, making data handling explicit and straightforward. This explicitness improves type safety and maintainability by making it easier to track what data is passed to the server action, reducing the risk of errors from variable shadowing or scoping issues.
Let me know if this makes sense to you/what you think!
Best,
Matt
1