Decoupling Form state from its Field components

WHAT THIS TESTS The interviewer is checking whether you can design a shared-state pattern where the container coordinates without knowing the concrete children, a core design-system skill.

A GOOD ANSWER COVERS Lift form state into a Form component that exposes it through context: a single store of field values, errors, touched flags, and submission status such as isSubmitting. Each Field consumes a useField hook that registers the field by name on mount, reads its current value and error from context, and writes updates back on change and blur. Because fields self-register, the Form never enumerates which fields exist; it simply orchestrates by iterating over registered fields to run validation and assemble the payload on submit. Validation is composed at the field level, each field declaring its own rules or schema slice, so adding a field does not require editing the Form. On submit, the Form runs all validators, sets errors, and either blocks or calls onSubmit with the collected values, tracking status so the UI can disable the button and show progress. This is the model behind libraries like React Hook Form and Formik.

COMMON WRONG ANSWERS Having the Form hold a hardcoded list of its fields, which recouples it. Storing each field's state in isolation with no shared submission or validation coordination. Prop-drilling values and onChange through many layers instead of using context. Putting all validation logic centrally in the Form.

LIKELY FOLLOW-UPS How do you avoid re-rendering every field on each keystroke? How do you integrate a schema validator like Zod or Yup? How do dynamic or array fields register and unregister?

ONE CONCRETE EXAMPLE A Form provider holds values and errors in context. An EmailField calls useField('email') with a required-and-format rule; it reads its value and error and updates context on change. Adding a new PhoneField just calls useField('phone'); the Form needs no changes, validates all registered fields on submit, and disables the submit button while isSubmitting is true.