Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why Does count Not Increment Correctly on Multiple Clicks? #15

Open
jainaakash1002 opened this issue Mar 8, 2025 · 0 comments
Open

Comments

@jainaakash1002
Copy link

Q53 :- What is the output of the following code snippet when the "Click me" button is clicked twice?
function App() {
const [count, setCount] = React.useState(0);

return (


You clicked {count} times


<button onClick={() => setCount(count + 1)}>Click me

);
}

Right Ans : -

Each time the button is clicked:

  1. The event handler runs: setCount(count + 1).
  2. React schedules a re-render with the updated state.
  3. However, the state update is not immediate. The value of count inside the event handler is the value from the last render.
  4. Since count does not update synchronously, clicking twice in quick succession causes both clicks to use the old stale state value.

Step-by-step breakdown:

Click # Current count Expression (setCount(count + 1)) Updated count
0 (initial) 0 - 0
1st Click 0 setCount(0 + 1) 1
2nd Click 0 (stale) setCount(0 + 1) 1 (not 2!)

Thus, after two clicks, count will be 1 instead of 2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant