Visit chaicode.com for all related materials, community help, source code etc. Sara code yaha milta h github.com/hiteshchoudhary/ Discord pe yaha paaye jaate h: ""/discord Instagram pe yaha paaye jaate h: / hiteshchoudharyofficial
I've learned this concept before from the React docs and it's called state as a snapshot. When we write setCounter(counter+1) multiple times it is updated only once because in the onclick handler of that render, even after calling setCounter(counter + 1) multiple times the value of the counter is 15, because after our event handler finishes, then React re-renders the component. They explained very well in their docs but you also explained very beautifully sir ❤❤
Detailed explaination of why does first syntax only updates the count once: Initial State: Assume count is initially 69. First Call: setCount(count + 1) schedules a state update to set count to 70 (69 + 1). Second Call: setCount(count + 1) schedules another state update to set count to 70 (69 + 1), because count is still 69 in this scope. Third Call: setCount(count + 1) schedules yet another state update to set count to 70 (69 + 1), again because count is still 69 in this scope. In case of functional updater syntax React ensures that changes are made to the latest state of the count hence each function gets access to the latest state of the count variable: First Call: setCount(count =>count+1) schedules a state update to set count to 70 Second Call : schedules a state update to set count to (70+1) because count is now 70 in this scope and so on...
According to me, the answer should be 19 The actual answer...... So here the function calls will be sent in batches. So, react will see them as the same operation and perform it only once. So, the counter will increase by only 1 count. To increase it by four counts, use the callback which the setCounter accepts and increase it one by one. So, the first function will be called first, the callback will be executed and the next function call will be executed.
As a beginner in React, I am seeking every kind of knowledge regarding React. It was actually a nice video to be watched in order to get more deeper. Thanks HItesh!
Can i say that it also depends on how you are passing an argument to the setterMethod; 1. If you will pass simple variable to settermethod without callbackfunction it will refer that variable which you passed as argument, because we passed 4 times the same argument which is 15 that's why we got 16. 2. On the otherhand, when we use callback() function inside setterMethod() because the settermethod() returns a updatedvar which is accepted by callback is modified one that's why we are able to increment the variable 4 times. The callback is not refering the var is we passing instead it refering the var which is in the object of useState specific variable I mean counter, setCounter are a part of single object so the setCounter is refering the counter using this.counter that's the callback gets the returned var which is updated
This is really a great video on learning about the async nature of the usestate function. And i always assumed that why do we need to use the previous value while updating the state. And this was the perfect example that taught me the difference when to use the callback func in updating the state. One thing is for sure, the way you teach is awesome and starting out concepts with the problem and solution approach is really superb!!! 👍
Everyone please comment on here. The reach is important for us to motivate sir to the highest and squeeze out the best number 1 content of React in hindi from Hitech sir.
useState send the UI updates in batches, and as react fiber is algo behind it, while processing it will see, if you are doing the same work with same values, it will treat as one and thus here it is incrementing only once. Now, for the second scenario, where we are using prevCounter it gives the current or existing state, as it is the result of callback which will execute every time.
so the useState( )hook has a setCounter function name can be differ but it schedules jobs in batches so all the instructions inside setCounter will be sent once altogether so it sees that all are repeated instructions so its gets executed only once. But in case of call back function syntax inside setCounter it immediately increments the value and when the next time it excutes it agian increments like that then it doesnt works in batches.
The setCounter is accessing the counter value which is 15 in all the multiple calls. So the answer will be 16 only as it addition 15+1 = 16 on every call. Rather if setCounter (prevValue => prevValue +1) would access the prevValue which is 15 on 1st call and prevValue = 16 on second call and so on. so for setCounter(counter + 1) // 16 always setCounter (prevCounter => prevCounter + 1) // will increase on each call. :D no cheating ;)
First of all THANKS for such an informative series. My question is from the previous video which is related to Tailwind and props. Other than Tailwind which UI library you will prefer like there is MUI etc, Bcz some of tailwinds feature are paid. Also I am Flutter developer so CSS / Bootstrap and other designing libraries me ‘ Meri expertise nahi hai 😄 Magar Mai is se OUT nahi hona chahta hun.’ Please help me regarding this with your valuable answer .
Sir aape concept ache hote hai aur ye 8 min lagta hai ki 8 second me he pura ho gya , mai to 8 din lagatar non-stop padh lu agar aese small small concepts aap dale to, just awesome concepts 😊🥰.
I watched this type of question in a premium course and there it is told that react automatically takes only one of the set state, why will it take only one it was not mentioned, By watching your videos it feels like this course is better than other premium courses. Thank you so much for providing this type of content Sir.
@@chaiaurcode It may not happen that you also pay further after some time because collegeWallah's DSA series also did the same, taught some important things and then paid later. Sir, I feel bad to ask like this because I'll not afford paid course 😐 .
Managing state updates in React components React components manage state updates efficiently by re-rendering only the necessary parts. Understanding how React manages state updates through reconciliation algorithms is essential. Optimizing state updates by batching them together improves performance and reduces unnecessary renders.
4:13, there is one more aspect to this, the main thing here is the issue of react stale closure, calling set state multiple times, is setting the count to the value, where the setState function has enclosed the closure, which is the counter variable it started with, so when we pass a callback function, it is able to get the freshest value, so this is due to react stale closure issue!
Bhaiyya hum log ++counter => call three times , bhi toh kar sakte the, toh jo counter variable hai uska final state hi reflect hota ..aur value yahan 3 times jump krti
3:18 I think it should be 16 cause the value of the variable is declared outside of the scope of the function and all the SetCounter will add 15 + 1 , then after the thread will reach outside the function the value and the api will get updated but its purely a guess work based on my intuition
It will not increase like this as the value of the state depend on its previous value so I think we should do something to store the previous one and with taht the new one lets see at the end its my assumption now at the last will see. edit:now after seeing we can actually take the previous state data by call back as begginer I tried to ans the question and actually I do grab the basic logic thanks sir ,i will do better from future also
setCounter(counter+1) multiple times it is updated only once because in the onclick handler of that render, even after calling setCounter(counter + 1) mu
The answer will be 16 even though we call setCounter(count +1) multiple times because when the button will clicked all count will have 15 and they increment by one so setCount will be 16.
00:03 The React interview question on counter is common and important. 01:01 Understanding state and basic operations in React. 02:09 Understanding the concept of counter in React 03:10 Understanding the concept of state in React 04:12 Using fiber and algorithm for badge updates 05:20 Updating the counter with the previous value using a hidden feature 06:28 Avoid code inconsistency by using clear variable names. 07:25 Exploring update function behavior in a React interview question
I think the answer at 03:22 would be 19 , I think because Hitesh sir already explained us in Fiber architecture video, that react makes chunks of work and then render the UI rather than rendering it after every change.
Okay, so behind the scene the settermethod will take a variable if we pass else because it is a part of counter variable it modifies the counter variable then it returns the updated counter which we accept in a callback function like : setCount((prevCounter) => prevCounter+1); then because we got an updated variable we can update it again. That's why earlier in simple setCount(counter+1) *4; we got only 16 means we unable to modify the counter variable because of fibre mechanism but when we used callback function now got 19😅 interesting.
03:04 sir yeh 16 hogi. setCounter agar ek ho ya ek seh Jayda har setCounter mein counter ki initial value hi pass hogi jisse counter mein hamesha ek ka hi increment hoga.
