How to fix A component is changing an uncontrolled input to be controlled in React

Set the state you bind to value (or checked for radios/checkboxes) to a concrete value from the start:

const [message, setMessage] = useState('');
const [agreed, setAgreed] = useState(false);

Even if the API result arrives later, React never sees undefined as the value, so the warning never fires. If you use TypeScript, type the state explicitly (useState<string>('')).

Guard against undefined responses by falling back to an empty string:

<input value={user?.nickname ?? ''} onChange={(e) => setNickname(e.target.value)} />

You can also use logical OR (||) when you truly expect an empty string fallback. This keeps value defined even if the prop is missing or null.

If you fetch data before rendering a form, wait for the payload with an early return:

if (!user) {
  return <p>Loading…</p>;
}

return (
  <input value={user.email} onChange={(e) => setEmail(e.target.value)} />
);

This avoids mounting the input with an undefined value while you still treat it as controlled.

When you do not need to update React state on each keystroke, make the input uncontrolled:

<input defaultValue="initial" ref={inputRef} />

Only read the ref.current.value when you need it (e.g., on submit). Do not pair defaultValue with value on the same element, because that mixes paradigms.

If you reset form state, keep the inputs controlled by resetting to empty values:

const RESET_STATE = { message: '', email: '' };
setFormState(RESET_STATE);

Avoid resetting fields to undefined/null, which would temporarily drop them from control and trigger the warning again.

When rendering fields from an array or nested object, provide fallbacks per item:

{fields.map((field) => (
  <input
    key={field.id}
    value={field.value ?? ''}
    onChange={(e) => updateField(field.id, e.target.value)}
  />
))}

This prevents sparse data from passing undefined for some items while others already have values.