useState Basics & Correct Updates
useState fundamentals and correct updates (value vs functional updater); recognize stale reads and batched updates.
useState Basics & Correct Updates is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Overview
Goal: Learn how useState works and how to update it correctly when changes depend on the previous value.
- State value + setter
- Batched updates
- Functional updater
useState in one minute
useState returns an array: [value, setValue]. Calling setValue schedules a re-render; React may batch multiple updates for performance.
Demo: basic useState
Create state and update it on click; this shows the basic setState flow.
<div id="root"></div>
Dependent updates need a function
If the next state depends on the previous state, use the functional updater to avoid stale reads across batched updates.
- setX(prev => prev + 1)
- Works reliably even with multiple calls
Demo: correct multiple updates
Calling the setter many times in one handler needs the functional updater to get the correct final value.
<div id="root"></div>
Tips & pitfalls
Tips:
- Do not mutate variables like count++ and expect React to notice—always use the setter.
- Use functional updater when the next value depends on the previous one.
- Multiple set calls may be batched.
Functional updater check
Recap
Recap: useState gives you a value and a setter; React batches updates; use the functional updater for changes based on the previous value.
Frequently asked questions
Is the “useState Basics & Correct Updates” lesson free?
Yes — the full text of “useState Basics & Correct Updates” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “useState Basics & Correct Updates”?
useState fundamentals and correct updates (value vs functional updater); recognize stale reads and batched updates. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “useState Basics & Correct Updates” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- useState Basics & Correct Updates
- Event Handling: onClick & onChange
- Controlled vs Uncontrolled Inputs (Intro)