Controlled components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a controlled component in React?

A controlled component is a form element (like input, textarea, select) whose value is controlled by React state. The component's displayed value is set by React, and user input updates the state.

beginner

How do you update the value of a controlled input in React?

You update the value by changing the state that controls the input's value, usually inside an event handler like onChange.

intermediate

Why are controlled components preferred over uncontrolled components in React?

Controlled components keep React as the single source of truth for form data, making it easier to validate, modify, or submit form data and keep UI consistent.

intermediate

What happens if you do not provide an onChange handler to a controlled input?

The input becomes read-only because React controls its value but has no way to update it from user input.

beginner

Show a simple React controlled input example.

Example: <br>const [name, setName] = React.useState('');<br><input value={name} onChange={e => setName(e.target.value)} />

In React, what controls the value of a controlled input?

A React state

B The DOM directly

C Browser default behavior

D CSS styles

Controlled inputs get their value from React state, not directly from the DOM.

What must you provide to a controlled input to allow user typing?

A A defaultValue attribute

B A ref to the input element

C An onChange handler that updates state

D A CSS class

Without an onChange handler updating state, the input cannot change its value.

Which is a benefit of controlled components?

A React manages form data centrally

B They require less code than uncontrolled components

C They automatically validate input

D They do not need event handlers

Controlled components keep form data in React state, making management easier.

What happens if you set a controlled input's value but omit onChange?

A React throws an error

B Input updates normally

C Input clears automatically

D Input becomes read-only

Without onChange, React cannot update state, so input cannot change.

Which React hook is commonly used to create controlled components?

A useEffect

B useState

C useRef

D useContext

useState holds the current value and updates it on user input.

Explain what a controlled component is and why it is useful in React forms.

Think about who controls the input's value and how React uses state.

Describe how you would implement a controlled text input in React.

Remember the flow: user types → onChange → update state → input value updates