Performance impact of multiple validateTrigger events in Ant Design Form

Direct Answer

There is no documented upper bound for the validateTrigger array length because the practical limit is the number of distinct DOM events Ant Design supports—typically 3–4 events (change, blur, focus, and occasionally input). Performance degradation is not caused by the array length itself but by the product of validation complexity × event frequency × field count.

With expensive validators (async calls, heavy regex, large object diffs), noticeable UI lag appears at 10–20 fields on desktop when using change, and at 5–8 fields on mobile. The focus event adds one validation per field focus; combined with change it produces more calls than the sum of each alone because focus and change can fire in rapid succession on the same interaction.

Confirmed Behavior

• validateTrigger accepts an array of event names; each event fires validation independently.
• Ant Design v4 places validateTrigger on Form.Item; v5 moves it to the Form component with name-path-based validation—behavior differs slightly.
• Internal debounce for onChange defaults to 0 ms; no automatic debounce is applied for other events.
• React 18 concurrent rendering batches some updates but does not eliminate the per-keystroke validation cost.

Recommended Pattern for Expensive Validation

1. Set validateTrigger={['blur']} on the Form (v5) or Form.Item (v4) for final validation.
2. Add a debounced onChange handler (300–500 ms) on each field that triggers form.validateFields() only for the changed field.
3. Avoid focus unless UX explicitly requires immediate validation on focus (rare).

Verification Steps

If you need to quantify the limit for your specific validator:

1. Build a test form with 15–20 fields using your actual validator logic.
2. Profile with React DevTools Profiler and Chrome Performance tab: compare validateTrigger={['change']} vs {['blur']} vs {['change','blur','focus']}.
3. Measure Long Tasks (>50 ms) and total scripting time per keystroke.

One Missing Diagnostic Detail

What is the typical synchronous execution time of your validator function? (e.g., 5 ms, 50 ms, 200 ms). This single number changes whether debounce is sufficient or whether you must move validation off the main thread (Web Worker) or to blur-only.