A react interview question on counter

[@tanmaypal2003]

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 ❤❤

[@heelsadhna]

but if i did setcounter(++counter ) for multiple times then value increases in multiple . kindly provide me the reason

[@MuhammadAbdullahMudassarMalik]

@@heelsadhna ++counter in React is not recommended. since you are using Set Method.

[@codingwave56]

@@MuhammadAbdullahMudassarMalik But why it works ?

[@ProgrammingPlanet]

​@@codingwave56 The reason is, useState doesn't update the state counter immediately, it schedules it to be updated in next render cycle. Current function (addValue) is being evaluated in current cycle. When executing each statement it evalutes the expression and then executes. Like useState( 15 + 1) -> variable is replaced with actual value As counter is still not updated... every statement of useState(counter + 1) uses value 15 In useState(++counter ) scenario. This is preincrement. Equivalent code is Counter = counter + 1 UseState(counter) This say first increment the variable and then use it.

[@PraveenKumar-24]

Namaste Guruji... Great tutorial... completed the JS Series and now learing React... Thank you for your valuable contribution to the society..

[@tajinder715]

Who is learning React for 1st time ? ❤

[@NaturesCall5]

Meee

[@kizigamer6895]

Me also but why you asked this

[@RohitChhabirajYadav]

​@@kizigamer6895😂😂😂

[@Rutvinayi]

Hitesh sir please make js and react interview questions series....

[@RohitSingh-je7fb]

16 hoga print har jagah

[@manasXDlol]

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...

[@awatanshsahay7570]

thanks bro for summarizing

[@dineshshinde2116]

3:29 that will incrment only one value as the react took them in the form of the bundle and only update one value Grasp thing - setCouter (prevCounter => counter + 1) as the setCounter take call back and in that we can accesss the previous value of the counter and then we can update it according to the usage

[@AsifButt-w1i]

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!

[@SatishK2022]

Value 16 hoga because setCounter ka jo last statement ha only wahi run hota ha ye or sab ko overwrite kar deta ha

[@abhishekkashyap2984]

2:46 value of counter will only be incremented by 1 because react takes a snapshot of the state and render according.

[@rishabhinc2936]

What do you mean by snapshot of the state ?

[@abhishekkashyap2984]

@@rishabhinc2936 snapshot of state means , state at that particular moment

[@anujkaushik_01]

There is also one question related to this which was also needed to be addressed. We provide a inital value to useState(0); say 0 but whenever state changes it again go for its initial value which may cause problem if this hardcoded values is coming from some sort of API or heavy computation, as it may overwhelm the APi or heavy computation process to call it on every state change

[@visheshgupta4990]

itti acchi playlist banai hai itte acche se samjhaya hai to 200 comments target tha and it crossed 2000+ wohoo 🥳🥳 , Thanks for sharing this 🙌

[@avinashrai4369]

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

[@vivekhalder2974]

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.

[@ankitnayak372]

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!!! 👍

[@sabitaliz7]

Kitne achi English hai bhai Tere 😢 main to confused ho jata hun ki kya comment karu 😂

[@ankitnayak372]

@@sabitaliz7 Arre bro jaise maan kre waise bol do start toh kro bolna phir improve ho jaegi

[@ab99823]

19, I was wrong. I saw this concept for the first time today. Now I will always remember this. Sir, please keep on making these type of videos, we love to learn the things that don't work as per our expectations, and ofcourse the explanation for it as well. Personally sir I love your style of teaching.

[@kushaalrana]

This is too good question. Thank you for this. Need more of these Interview Questions. Maza aagaya

[@theGameofwebDevelopment]

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.

[@PrashantGupta-vz1pf]

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.

[@aksh1453]

16 hi hoga..because react uses batch updates...which also makes states feel like asynchronous function

[@whatappstatus6937]

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 ❤❤

[@whatappstatus6937]

2:46 value of counter will only be incremented by 1 because react takes a snapshot of the state and render according.

[@itssaifcode]

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]

Ye channel bhi premium se kam nhi 😁

[@itssaifcode]

This channel is real premium, Thank you so much again sir for helping us this much.🙏🏻

[@Bhushantbn]

@@chaiaurcode premium channel nhi ye channel to Premium Pro...... he.....sir..🙏

[@ThaCoders]

@@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 😐 .

[@bhagyashreenanda7049]

100% true@@chaiaurcode

[@sonuviraaj3406]

Async function so it would be 16 only but if we want to log in console then it will update but not on ui....

[@ankan-dev]

It would be 16 only as the setState is an async call

[@tajinder715]

hey Ankan

[@ankan-dev]

@@tajinder715 hi

[@tajinder715]

@@ankan-dev i would like to connect with you on discord and want to take some suggestions there.

[@ankan-dev]

@@tajinder715 sure my username is ankan002

[@Bobby-vs3zc]

3:31 I'm making a prediction of 19. The reason is like how in js, if we increment for any number of times with i++ or i+1, it gets incremented.

[@SKD14344AK]

3:27 sir according to me , it will only increment the counter for one time not multiple times as you've duplicate it . The reason is that if it will increase the counter multiple times from default 15 so it'll become 19 , means after clicking on add button the counter will increment with 4. which is quite impossible . Because after increment it for one time the React re-render it and for that it'll create a New Virtual Dom and compare it from previous one , if the changes will same it'll not update the changes , but incase if there is actual changes , The React will update the changes .

[@sayyedaamerasharali7583]

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 .

[@AbhisekMaitiOfficial]

tailwindui have subscription plan but the core classes are free in tailwind

[@Freak_15]

3:29 Haan sir, mere according state 16 hogi then 17 hogi then 18 hogi then 19 hogi kyunki react fibre last wali value ko render karke layega toh value 19 honi chahiye as per mei, no cheating

[@tanishqvishwakarma9518]

This course is way better than any paid course .

[@saurabhbaij]

I didn't understand this video in the first go.. But after reading a lot of comments and articles, now I have finally understood!

[@muzzammilnoorkhan4536]

3:26 from when we click btn and the function call so it will not increment . Reason not store value due to number of repetition

[@krishna.vineet]

3:29 I guess 16, because pehle complete hoga ye pura, then dom bnega.. and ham counter++ nhi kr rhe, counter + 1, to har baar 15+1=16 hi hoga

[@ImArslan-zq2mp]

Very Interesting Concept Sir Bohot Helpful Tha Sir G Thanks For The Interview Question

[@sumittodankar4631]

Thanks Hitesh.! You cleared all the concepts in-depth.

[@bhansingh91]

sir apke sath learn bhi kr rhe h aur job interview ke bhi question pta chal ja rhe h thank you sir🙏🙏

[@manasXDlol]

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.

[@manasXDlol]

I was wrong xd, anyways learnt something new!

[@ImArslan-zq2mp]

3:24 Sir Sachi Bta ra hu at that Moment Mujhe lg ra th ke 20 Print hoga But Kyunke mane Lecture suna hua ha Pehle to mujhe Pta ha ke sirf 1 Hi Incrment hoga or value 15 se 16 hojai gi

[@kunalgarg4922]

3:05 Increment sirf 1 se honi chahiye, kyunki function har baar same counter hi ja raha hai. Shayad...

[@vijaykumarb9622]

Sir, I am very happy with this course and your way of teaching. Just keep your magic ON.💗

[@KrishnaKumar-kh5iu]

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.

[@choudhurymakes]

Thanks for helping to improveing our interview knowledge

[@HimilPrajapati]

Wow, what a video, sir, I just learned this today, I've just started my day ( Day:4)

[@aniketchile6465]

This series is best on youtube for react

[@OnaijTimes]

Sir literally me react ko koi itna mushkil bhala samajh raha tha but ap ke teaching way ne mujhe ghalat sabit sakrdya ❤

[@commenfacts6583]

3:05 no because only one time we can declare vairable

[@Manoj-eh7dn]

Thank god I found these playlists

[@RoronoaZoro78687]

16 hi print hoga kuki vo code override hojai ga 3:21

[@_CodeCapsule]

counter = counter +1 counter = counter +1 counter = counter +1 counter = counter +1 setCounter (counter) is se bhi same kaam ho rha hai

[@PurePerfect]

Bhai apka knowledge to Kamal ka h 😂

[@truck-kun6483]

3:21 the value will be 16 but it will be updated 4 times

[@mrgamerzyt3945]

3:25 idk why i think 16 will be printed since i think it is a trick question

[@AshutoshPandey-bu7of]

3:32 - I think sirt the value of counter will be 16 in UI

[@RahulGupta-f9z]

setCounter(counter +=1) setCounter(counter +=1) setCounter(counter +=1) setCounter(counter +=1) if i am doing this it will still gonna do the same thing instead of writing prevcounter

[@Srijan858]

yes same it is adding four times

[@AkashYadav-di6kd]

3:13 My answer may be wrong, the value will increase by +4 on add value

[@pro_gamer7843]

only 1 will increment and the value of counter will 16 the remaining incremental function will not work because react does not immediately change the state.

[@AkashYadav-di6kd]

I want to share my insights. In actuall what happened, when the first line will be read setCounter(counter + 1) then closure comes into the picture and captures the current value of the counter i.e. 15 so finally setCounter( 15 + 1) => setCounter(16). Now, the useState schedules this for future. It is not sent to update immediately. Now, move to second line setCounter(counter + 1) here again closure captures the current value of counter i.e. 15 (because the last call has not sent yet ) so finally setCounter(15 + 1) => setCounter(16). Again useState schedule this for future. Same for 3rd and 4th call setCounter(15 + 1) => setCounter(16) Now, when the useState sent all these 4 calls setCounter(16) for the update then the final value will be 16 only. If you find any mistake then let me know in comments

[@AmanWebDev]

Today's learning done...👍👍

[@swapnildapkosh2813]

initially we were not holding the previous value that's why we are not getting the desired answer, callback is saviour for such situations.

[@MahakPandey-h2w]

Sir ,want more such videos !! can you please create a playlist specially for interviews in js and react.

[@gohilharsh501]

more interview questions please???

[@kashishchaurasiya1362]

Hlw sir first of all tqsm for this amazing series and it is a oppertunity for me and other students to do something good by the way I think the answer of this interview questions is 19 according to me 😅 I know its wrong but still I tried

[@rakeshbhetariya]

once again grate lecture and if you can upload more vide like this one

[@EngineerAnsh]

3:00 kuch nhi hoga sir because we pass ( counter + 1) so aek line ho ya 100 line it will work like normal this is from my side don't see the answer now i see the answer

[@sufiyanmogal1527]

The value will be 16 because states are asynchronous and not update the value in one render so all the counter state will not upate, if we want to get the current value in each setState function we can use arrow function but its not recommended becuase has some downgrades

[@sparkygaming1746]

prev Value of useSate part of the video is very informative.

[@hari4345]

at 7:41 this " function increment() { setCounter(++counter); setCounter(++counter); setCounter(++counter); setCounter(++counter); } " the same as " function increment() { setCounter((Counter)=>(Counter + 1)); setCounter((Counter)=>(Counter + 1)); setCounter((Counter)=>(Counter + 1)); setCounter((Counter)=>(Counter + 1)); } " what might me be the reason ?

[@siddhanttripathi7943]

Initial response before knowing the answe r -> it will just increment by 1. not by 4.

[@sarangkumarsingh7901]

Another exciting lecture....

[@adityarajboum3572]

sirji aise mind kholne wale questions aaur chahiye

[@mayanksoni1600]

3:20 -> Answer : 19

[@muhammadawaisarshad4526]

i'm answering before watching video next, when we work with hook, when we call hook then our component re render it will not execute more then one time.

[@hodophilesoul117]

Thanku so much hitesh sir.

[@HMArslan]

3:24 I think only 1 update hoga but let's see sir kia hota ha ab ap hi btai

[@hardikrawal4922]

3:24 answer-19 according to me

[@sayanchakraborty2194]

Please Continue the series sir we need this

[@Spsaab14]

By honesty... 3.40 sir 16 hi hoga...... Because jab setter function variable use krte h to uski default value hi add hoti h

[@smartAi09]

hi hitesh sir , i am learn react your video is great

[@nishantdholakia224]

Answer should be 16 as we are not incrementing value of counter , we are just passing an int constant literal got after executing counter+1 expression

[@kishan5036]

amazing teaching technique

[@Tejas-gk5ze]

sir 16 hi hoga, because setCounter aisa function nahi hai ki wo counter = counter + 1 kar rha hai, wo to counter + 1 ek new vairable mai store karke rerender kare pass kardeta hai counter ko jis se update ho jaate hai value hume lagta hai ki couter +1 hua hai jbaki asal mai ye new couter hai jiski value counter+1 hai.

[@im9fg]

16, tukka tha shi lga😅. anyway intresting concept discussed.

[@dhorenihal3420]

Value will remain 16 as set is a call back will go to the task queue and get executed when the call stack becomes empty

[@saptarsidebnath3516]

3:05 count value should be 15

[@PoojaSharma-cd8qm]

Very useful thank you sir❤

[@debanshupati207]

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

[@gopitrip]

interesting concept sir thank you

[@sameershahidbutta]

3:14 mere hisaab se value 19 hogi

[@SahilKhan-kh5uc]

16 hi hoga because counter variable mein value update nahi ho rhi hai. isliye har line 15+1=16 hi hoga

[@coderdas_11]

best series for react js.

[@oneIIU]

i think fiber should pause the immediate changes and entertain the latest one only, if that happens the value should increase by 1 only

[@adityanagariya4645]

More Freshers's Interview Questions Sir

[@PRINCESAHU-eb5ll]

Thank you for this react series

[@zindafossil3835]

How Intersting This is 👍

[@--bountyhunter--]

Underrated content creator

[@sagar-tt4ub]

very interesting sir where can I read more about such kind of topics where you mentioned that using a callback would update everytime, but passing directly would not

[@sahinpathan5197]

Intresting question ✨

[@abhaykashyap2848]

thanks sir for upload this type content

[@ManojSingh-b1j3i]

3:16 my honest Answer which is coming in my mind : that is ! 19

[@GautamSingh-sw1rk]

3:27 answer 19

[@RAGHURAJPRATAPSINGH-qf3zx]

last vala hi consider hoga bs

[@LearnerAbhi21]

19 ig ans 3:09