🚀 React Developers Can you answer this tricky question? This looks simple, but this question tests deep understanding of React’s rendering cycle, batching, and hooks. ✅ Most guess the value is 3 but it’s actually 0. ✅ Why? React batches multiple state updates in the same event loop. All three setCount(count + 1) calls use the same stale value (0). So the state updates only once, and the new count becomes 1. And console.log(count) prints the old render value (0) because state updates apply after re-render. #reactjs #frontenddevelopment #javascript #reacthooks #reactinterview #webdevelopment #nextjs #reacttips #frontendengineer #seniorfrontend #programming #womenintech #softwaredevelopment #developers #codingtips #learnreact
0 as setter function are async and batched and I guess even after rerender it will be 1 only as reference of count is always 0 for all three setter function and if prev is used then it would be updated to 3 but 0 will be consoled in any case
0
Knowing that setCount is asynchronous, but not in the sense of promises, and that it requires the argument to be a callback function depending on the previous state, is a piece of knowledge I wouldn't want to learn from a framework. This is not simple. And it's not even React's fault: every framework out there implements some sort of convoluted component state. That's why I created a framework that's much simpler, more predictable and a pleasure to test, while maintaining peak performance (without the need for memoization and other hacks). Check it out! https://npmjs.com/package/@inglorious/web
Since the component re-renders every time the state changes, it loses the previous state. To avoid this, we use a callback with setCount to access the previous state and update it accordingly.
0 cuz console.log(count) runs before React re-renders with the updated state (setCount is async), output would be 1 if we put console.log(count) inside an useEffect and 3 if we used setCount(prev => prev + 1) while console.log(count) being inside useEffect
output will be 1 because React update a count one time intially will be 0 but at the time of click it can be updated at one time only 0 + 1 = 1 because useState is a asynchronus
Try using setCountFlushSync()
States are batched up and would get updated in the next render only. So console.log(count) simply prints 0 i.e. the initial value at the start.
If setCount((previous) => previous + 1) then it will increment the value.
0 because during the function execution the value of count variable in lexical environment is 0 so it will displayed as 0 And in UI after the function execution the value for count will be 1, why? Because react will batch all the three setter updates and then when that batch gets executed the count value it will use will be 0, why? Because when batch is created the reference of that time lexical environment will be taken as reference and that's why three times 1 will be stored into count and react re render and will showcase one instead of three