The AI Form That Forgets Your Selection

#frontend #javascript #webdev #ai

The State Sync Trap

You build a form where an LLM suggests options based on previous answers. The user picks "Canada", the model suggests "Toronto", but the underlying state object still holds the old value. The UI looks right; the data is wrong.

This happens because "intelligent" UIs treat the DOM as the source of truth instead of your state tree. The model generates new JSX, React reconciles it, and your onChange handler fires with stale context.

What you'll learn:

Why controlled components fail when the model rewrites the options array
How to validate AI suggestions against your schema before rendering
The minimal wrapper that keeps state and suggestions in sync

The Broken Pattern

Here's the common mistake: an uncontrolled input that trusts the model's output blindly.

const [suggestions, setSuggestions] = useState([]);

const handleAIResponse = (response) => {
  setSuggestions(response.options); // trusts the model
};

return (
  <select onChange={(e) => setValue(e.target.value)}>
    {suggestions.map(opt => <option key={opt.id}>{opt.label}</option>)}
  </select>
);

The problem: response.options might contain values your schema doesn't expect. When the user selects an option, e.target.value could be a hallucinated ID that crashes your backend.

Validate Before Render

Wrap the AI output in a schema check. Reject anything that doesn't match your expected shape.

const validateSuggestions = (raw) => {
  if (!Array.isArray(raw)) return [];
  return raw.filter(item => 
    item.id && typeof item.id === 'string' &&
    item.label && typeof item.label === 'string'
  );
};

const handleAIResponse = (response) => {
  const safe = validateSuggestions(response.options);
  setSuggestions(safe);
};

This costs you some "intelligence"—the model might suggest a valid but irrelevant option—but it prevents the form from submitting garbage data.

The Hallucination Failure Mode

Models occasionally invent options that look real. A dropdown for "Payment Method" might include "CryptoWallet_2024" even though you only support credit cards. The user selects it, the form submits, and your API returns a 400 error with no clear message.

The workaround is a denylist or allowlist at the validation layer. Never trust the model's vocabulary; trust your domain schema.

Key Takeaways

Treat AI-generated UI as untrusted input, not a rendering instruction
Validate every suggestion against your data schema before it hits the DOM
Keep the state tree as the single source of truth, not the rendered options

Source

I added working validation code, the specific state-desync failure mode, and a schema-check pattern the source did not cover.

Support this work

These write-ups are researched and published with no paywall, sponsor, or tracking. If one saved you an afternoon, a small tip keeps them coming.

USDT, USDC or USDD · TRC-20 (Tron)

TFTNsfyomKrnUutRjBTGVULp19ByW29KbY

DEV Community