Preserve reload state
A progressively enhanced form must retain Conform state after a document reload.
Conform · Component
FormStateInput
FormStateInput renders a hidden input that preserves Conform form state across document reloads. Use it inside FormProvider when full progressive enhancement must retain validation errors and other state.
How it works
FormStateInput is a React component that renders a hidden input for preserving Conform form state during a document reload. Render it inside FormProvider with the form context when progressive enhancement requires errors and other state to survive reloads.
Syntax
<FormStateInput />Returns
A React element containing a hidden input that persists form state.
Key points
- It is a React component whose rendered hidden input carries Conform state through a document reload.
- Rendering it enables Conform to restore the persisted form state.
- Restored state allows errors for every validated field to continue displaying.
- There are no component props to configure.
Common mistakes
- Without this component, a document reload can discard part of the form state.
- Non-submit intents, such as adding a list field, can lose validated-field error information after reload.
Example: Persist form state across reloads
import { FormProvider, FormStateInput, useForm } from '@conform-to/react';
export default function SomeParent() {
const [form] = useForm();
return (
<FormProvider context={form.context}>
<form method="post">
<FormStateInput />
<input name="email" type="email" />
<button type="submit">Save</button>
</form>
</FormProvider>
);
}Place the component inside a FormProvider so it can persist and restore Conform's form state across document reloads.
When to use it
Retain errors during field-list changes
A non-submit intent changes form structure and should keep existing validation errors visible.
Connect provider state
A form uses FormProvider and needs the documented state-persistence integration.
Interview questions
QWhat does FormStateInput do?
FormStateInput renders a hidden input that persists Conform's form state when the document reloads. It should be rendered within FormProvider and does not require configuration props.
Follow-up: When is it especially useful? It is useful for full progressive enhancement, particularly when a non-submit intent reloads the document and previously validated errors must remain visible.
QHow is FormStateInput integrated with a form?
The component consumes the context supplied by FormProvider, so the usual pattern is to pass form.context to FormProvider and render FormStateInput inside it. The component itself accepts no props.
Follow-up: What happens if it is rendered outside the provider? The documented usage requires the provider context; therefore it cannot obtain the form state through the intended integration pattern.
QWhen should you render FormStateInput?
It is optional when reload persistence is unnecessary. Use it when aiming for full progressive enhancement, because it lets Conform restore state and keep errors from all validated fields displayed after a reload.
Follow-up: Why can a normal submission differ from a non-submit intent? A non-submit intent, such as inserting a field into a list, can reload the document without preserving the same validated-field error information unless the state input is present.
Related
FormProvideruseForm