Forms and Events

A controlled component is a form element whose value is driven by React state. Every change goes through a state setter, so React is the single source of truth for the input's current value.

An uncontrolled component is a form element that stores its own state in the DOM. You typically read its value using a ref when needed, for example on form submission, instead of on every keystroke.

Controlled forms keep React state in sync with form values, which makes it easy to validate input as the user types, conditionally disable submission, transform values, and build a single source of truth for the form data.

Controlled forms give precise control and easy validation but can be more verbose and may cause more re-renders. Uncontrolled forms are simpler and closer to plain HTML but make it harder to react to changes or enforce complex validation.

A synthetic event is a cross-browser wrapper around the browser's native event. It has the same interface as native events but works identically across browsers and provides React's consistent event system.

In React 17 and later, React attaches a single listener to the root container of the app instead of the document. When an event fires, React walks up the virtual DOM tree and calls the appropriate handlers, improving performance and isolation.

Conditional rendering is the practice of rendering different UI based on some condition. In React it is typically done with regular JavaScript, such as if statements, ternary expressions, or logical and operators inside JSX.

Returning null or false from a component tells React to render nothing. Both are equivalent for skipping output. Returning undefined, however, is an error in most cases. ---