Each instance has its own private state
Same component, two instances, two separate counts. Neither counter can see the other's state, and App can't see either.
useState gives a component a value that React remembers between renders plus a setter function; calling the setter stores a new value and makes React render the component again so the screen shows it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a Toggle component with a button that switches between ON and OFF on each click.
Build a NameTag with two buttons, Asha and Ravi, and a heading Hello, <name>! that starts as Hello, guest!.
Explain it without notes
Why can't a component remember a value in a local variable?
What does useState return, and what does calling the setter do?
If you render a component three times, how many copies of its state exist?
When is the argument to useState used?
Preview
Console
Nothing logged yet.Expected console output
Apples: 2
Mangoes: 1