A react interview question on counter

Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
""/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial

[@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 ?

[@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

[@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!

[@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 🙌

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

[@tajinder715]

Who is learning React for 1st time ? ❤

[@endgame3842]

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

[@PraveenKumar-24]

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

[@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

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

[@nehabansal370]

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.

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

[@SatishK2022]

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

[@subashmaurya6031]

Sir, you read in depth and explain it so that there is no need for any more videos.

[@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

[@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

[@aksh1453]

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

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

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

[@siddhanttripathi7943]

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

[@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

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

[@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

[@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

[@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

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

[@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

[@_CodeCapsule]

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

[@vijaykumarb9622]

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

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

[@TanyaSingh-fm1bn]

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 ;)

[@MahakPandey-h2w]

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

[@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!

[@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

[@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

[@The_Aesthetic_Developer]

if passed a variable then it will execute it one time ... otherwise if passed a function , it will execute that particular times

[@thecalgarians4597]

Sir ji, dimaag hila diya ye concept bata k. 🙏

[@A11-RECORD]

3:33 the set counter add one only because method over-ride in js

[@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!

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

[@bhargavshekhar3745]

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

[@sumittodankar4631]

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

[@farhanjafri1516]

This is the best explanation i got for callback in set method 🧡🧡

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

[@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

[@SahilKhan-kh5uc]

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

[@adityarajboum3572]

sirji aise mind kholne wale questions aaur chahiye

[@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

[@kunalgarg4922]

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

[@AnushrutaMitra-wc6sg]

i dont understand what is the problem in doing setCounter(counter+4)??

[@amazonsolutions1569]

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.

[@PurePerfect]

Bhai apka knowledge to Kamal ka h 😂

[@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

[@spdwivedi5925]

aise hi ek video bna dena sir kuch questions ki, time nikaal ke

[@SonuKumar-s3o8x]

all setcounter call at a same time so it overwrite each other value rather then increasing one by one

[@shubhgaming3348]

sir mujhe lgta h counter ki value ek hi baar increase hogi because of reconciliation algorithm or fiber answer of question asked at 3:18

[@sameerahmed4095]

16 because set counter at a time chalega tw multiple time variable update nh hoga

[@wajidhussain8143]

just same work krey ga jese abi kr rha mujhey duplicate krne se kuch effect ni hona... just increase by 1 he hoga

[@SarveshKumar-bl9in]

thank you for this question and please bring more types of this question for interview preparation.

[@MaheshwariLakde]

I am feeling confident in both React and JS. Thank You Hitesh Sir 😀

[@sayanchakraborty2194]

Please Continue the series sir we need this

[@Sufiyan_AK]

it is only update once becouse it is update four only when it there is an updater function, setCount(c => c +1)

[@RishabhSingh-eq4jf]

Before checking answer, i think something might be realted to react-fiber, so it will take changes as one.

[@25GS.__98]

i think the value just increment by one only because it recursively call the counter fucntion

[@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 ?

[@Vk_9060]

thats mean const addvalue = () =>{ const counter2 = counter + 1 if (counter2 counter2 +1) console.log("value added", counter2); } }

[@vasubhatia8069]

value will be updated to 16 only and not 17,18,19 as we r not updating the variable

[@Vardanaggarwal]

according to me value 1se hi increase hogi this concept is from functional call stack.

[@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

[@Saurav._.2305]

no change i guess since there will not be any change during fiber algo check

[@Sumitpatel-ww4ny]

I think if you call increment more then one time then the result will be the same

[@SHUBHAMJHA-o3g]

agar mujhe pehele se samjhna tha ki aise kyu hota hai toh kaha se kar sakte the ? ek general idea chaiye independent of techstack. like mai ye nhi bata pata interview me ki ye internaaly aise work karta hai ...etc etc. anyone experienced please help.

[@HimilPrajapati]

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

[@priyanshukandari-v2t]

answer 16 hoga kyuki react same type ke state update ko ek sath perform kar deta h bs 16 4 bar render hoga.

[@commenfacts6583]

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

[@flixxx2op641]

use state jitne bhi changes hote hai vo batches me bhejta hai so ye sab ek hi counter ko update kr rhe hai so isiliye

[@manojpaithane5704]

Anyone is here who learning React for 1st time 😍❤ @hitesh sir please provide some basics as well coz who's is coming here for first time they faced the lots of problems and they mostly quit like how they works exactly etc. sending lots of love from all mechanicals eng🤞🤞

[@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

[@firdoshiahmed9388]

16, coz the value from setCounter() is not been passed to the next setCounter()

[@pranaypaul6361]

tricky.....but crucial. always expect surprise...

[@PRINCESAHU-eb5ll]

Thank you for this react series

[@anshdholakiya7606]

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

[@GopikrishnanTripathy]

interesting concept sir thank you

[@smartAi09]

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

[@adityanagariya4645]

More Freshers's Interview Questions Sir

[@difflyfe23]

My day 5 . of being consistent. Thanks sir

[@ujjalDas_11]

best series for react js.

[@LashknaParmar]

We can do also direct counter + 6 ?

[@heyMonikaa]

16 as we are not iterating through loops this counter value will not gets updated in next step

[@mohitkumarmourya]

batches per control using fiber

[@MohammedHasmi577]

I dont know , but may be first setCounter run only and give 16 ans. Edit : got it my answer each time it will update same value so we will got 16 answer, thank you so much guruji❤❤

[@abhaykashyap2848]

thanks sir for upload this type content

[@shubhanshubhan1419]

When we make multiple call of setState function React batch them together in one call only last call coisdered as final call

[@pranavgupta6877]

16 will be printed because we are not changing the value of counter variable we are just re-painting the webpage for a particular change

[@WatchNotchK2S]

3:05 The value of counter will increase once only

[@harshsajla7216]

sir want more of this kind of videos

[@RAGHURAJPRATAPSINGH-qf3zx]

last vala hi consider hoga bs

[@mrgamerzyt3945]

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

[@PoojaSharma-cd8qm]

Very useful thank you sir❤