Which statement describes uncontrolled components in React forms?

Which statement describes uncontrolled components in React forms?

• A. Uncontrolled components keep their value in React state.
• B. Uncontrolled components rely on the DOM to hold the value, accessed with a ref.
• C. Uncontrolled components render only on server.
• D. Uncontrolled components require useContext to access value.

Answer: (B)

In uncontrolled components, the input’s value lives in the DOM, not in React state. You attach a ref to the DOM element and read the current value directly from that element (for example, reading inputRef.current.value when you handle a form submission). This is why the statement that the DOM holds the value and it’s accessed with a ref is the best description. This contrasts with controlled components, where React state is the source of truth for the input’s value, updated on every change. The other options aren’t about how form values are stored or read: rendering on the server isn’t what defines uncontrolled components, and using useContext isn’t related to how the input’s value is accessed. Uncontrolled components can be handy when you want simpler code without re-rendering on each keystroke or when integrating with non-React libraries.

In uncontrolled components, the input’s value lives in the DOM, not in React state. You attach a ref to the DOM element and read the current value directly from that element (for example, reading inputRef.current.value when you handle a form submission). This is why the statement that the DOM holds the value and it’s accessed with a ref is the best description.

This contrasts with controlled components, where React state is the source of truth for the input’s value, updated on every change. The other options aren’t about how form values are stored or read: rendering on the server isn’t what defines uncontrolled components, and using useContext isn’t related to how the input’s value is accessed. Uncontrolled components can be handy when you want simpler code without re-rendering on each keystroke or when integrating with non-React libraries.