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.

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

[@PraveenKumar-24]

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

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

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

[@SatishK2022]

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

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

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

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

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

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

[@bhansingh91]

sir apke sath learn bhi kr rhe h aur job interview ke bhi question pta chal ja rhe h thank you 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

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

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

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

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

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

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

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

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

[@ImArslan-zq2mp]

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

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

[@whatappstatus6937]

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

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

[@vijaykumarb9622]

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

[@choudhurymakes]

Thanks for helping to improveing our interview knowledge

[@_CodeCapsule]

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

[@sumittodankar4631]

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

[@farhanjafri1516]

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

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

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

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

[@thecalgarians4597]

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

[@MOHDUMAIR-p5y]

Now we gonna Learn an interview Question which is asked in React interview so Question is -> in given function let [counter, setCounter] = useState(0) let addValue = () => { setCounter(counter +1) setCounter(counter +1) setCounter(counter +1) setCounter(counter +1) } tell me that what is the value of the counter when the user click the button to add the value is it +4 or not Answer -> Due to Fiber Concept React take it as the batch process so it only add the value by +1 Counter Question by interviewer -> so what is the processor to add the value like the function shows Answer -> so we know that 'setCounter returns the function to add the value' so if we use arrow function to add the value so it add the values as much times you want in this manner let [counter, setCounter] = useState(0) let addValue = () => { setCounter(counter => counter +1) setCounter(counter => counter +1) setCounter(counter => counter +1) setCounter(counter => counter +1) }

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

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

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

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

[@MahakPandey-h2w]

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

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

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

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

[@Monika-f5v]

Monika - 19, akshay-16

[@SahilKhan-kh5uc]

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

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

[@kunalgarg4922]

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

[@Manoj-eh7dn]

Thank god I found these playlists

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

[@chhavimanichoubey9437]

react docs helped me a lot understanding this.

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

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

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

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

[@PurePerfect]

Bhai apka knowledge to Kamal ka h 😂

[@commenfacts6583]

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

[@truck-kun6483]

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

[@lavkushsingh8213]

02:58 value 19 hogi 🤭 03:25 waiting 03:42 wasted!!! 😨

[@rakeshbhetariya]

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

[@adityarajboum3572]

sirji aise mind kholne wale questions aaur chahiye

[@HimilPrajapati]

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

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

[@AshutoshPandey-bu7of]

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

[@PraveenSaini-yo7kq]

Thanks sir for explaining this interview question 😊

[@vivekverma2186]

I guess 15 will be printed, as saw in the counter video, printing the counter even after updating it printed the older value

[@sayanchakraborty2194]

Please Continue the series sir we need this

[@Vardanaggarwal]

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

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

[@SonuKumar-s3o8x]

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

[@A11-RECORD]

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

[@vasubhatia8069]

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

[@flixxx2op641]

the answer will be 16 because when set counter function runs then it re renders this is called snapshot concept

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

[@viralpw5846]

it will change dynamically , keep incrementing upto 19;

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

[@im9fg]

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

[@spdwivedi5925]

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

[@pranaypaul6361]

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

[@RishabhSingh-eq4jf]

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

[@mayanksoni1600]

3:20 -> Answer : 19

[@GopikrishnanTripathy]

interesting concept sir thank you

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

[@Sufiyan_AK]

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

[@adityanagariya4645]

More Freshers's Interview Questions Sir

[@saptarsidebnath3516]

3:05 count value should be 15

[@PRINCESAHU-eb5ll]

Thank you for this react series

[@hardikrawal4922]

3:24 answer-19 according to me

[@sahinpathan5197]

Intresting question ✨

[@coderdas_11]

best series for react js.

[@SHUBHAMJHA-o3g]

16 kyuki counter ki value toh 15 hi hai my guess although intuition ye bhi bol raha hai ki 19 hoga. interview me mai 19 bolta most probably

[@sunil_09kumar66]

presh the 15 but click the button 1 digit in enceremant

[@bishalgupta702]

3:12 ans is 19 maybe

[@ManojSingh-b1j3i]

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

[@firdoshiahmed9388]

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