Module 2 · State, effects and live data Lesson 4 of 15
useState and controlled forms
State is a value that survives a re-render. A controlled input keeps the value in state and re-renders on every keystroke — more code than an uncontrolled input, and the version you can validate and reset.
Worked example
const [q, setQ] = useState("") with value={q} onChange={(e) => setQ(e.target.value)} is the whole pattern. Removing value makes the input uncontrolled and its text invisible to your validation code.
Your practice task
Build a search box with a clear button and a character counter, then a four-field form that refuses to submit while one field is empty.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
State is a value that survives a re-render. A controlled input keeps the value in state and re-renders on every keystroke — more code than an uncontrolled input, and the version you can validate and reset.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.