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 ?

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

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

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

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

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

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

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

[@bhansingh91]

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

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

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

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

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

[@ImArslan-zq2mp]

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

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

[@SatishK2022]

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

[@aksh1453]

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

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

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

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

[@thecalgarians4597]

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

[@sumittodankar4631]

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

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

[@farhanjafri1516]

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

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

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

[@PraveenSaini-yo7kq]

Thanks sir for explaining this interview question 😊

[@chhavimanichoubey9437]

react docs helped me a lot understanding this.

[@Manoj-eh7dn]

Thank god I found these playlists

[@MahakPandey-h2w]

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

[@PRAKASHSAHU-jf8lx]

really helpful sir ji ,salute❤❤

[@HimilPrajapati]

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

[@adityarajboum3572]

sirji aise mind kholne wale questions aaur chahiye

[@PurePerfect]

Bhai apka knowledge to Kamal ka h 😂

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

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

[@rupeshpal7292]

Way of explanation is damn good🙏

[@_CodeCapsule]

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

[@rakeshbhetariya]

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

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

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

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

[@sayanchakraborty2194]

Please Continue the series sir we need this

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

[@PoojaSharma-cd8qm]

Very useful thank you sir❤

[@whatappstatus6937]

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

[@difflyfe23]

My day 5 . of being consistent. Thanks sir

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

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

[@spdwivedi5925]

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

[@GopikrishnanTripathy]

interesting concept sir thank you

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

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

[@PRINCESAHU-eb5ll]

Thank you for this react series

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

[@pranaypaul6361]

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

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

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

[@smartAi09]

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

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

[@raziuddin2081]

Thanks for this concept

[@abhaykashyap2848]

thanks sir for upload this type content

[@SahilKhan-kh5uc]

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

[@sahinpathan5197]

Intresting question ✨

[@commenfacts6583]

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

[@adityanagariya4645]

More Freshers's Interview Questions Sir

[@kunalgarg4922]

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

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

[@A11-RECORD]

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

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

[@coderdas_11]

best series for react js.

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

[@im9fg]

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

[@thebeastguy6925]

Thankyou sirji ❤❤

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

[@trishnapatel2738]

nice explanation

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

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

[@jnuwalaengineer]

awesome concept✨✨

[@sam-zy6xq]

great work sir ji

[@consolelog21]

Add more videos like this please🙏

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

[@MonikaKumari-er4de]

Thank you sir

[@truck-kun6483]

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

[@wajidhussain8143]

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

[@manvendra0821]

Day-4 with the knowledge of tailwind and knowing main power of react : component reusability

[@aryanbasudev1]

kya series h maja aa gaya

[@razaali3175]

Sir yeh buht hi interesting tha

[@SonuKumar-s3o8x]

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

[@AbhayGupta-ij6ji]

Thanks a lot...Sir🙌

[@lavkushsingh8213]

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

[@--bountyhunter--]

Underrated content creator

[@AshutoshPandey-bu7of]

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

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

[@mohitkumarmourya]

batches per control using fiber

[@rockyrockon6664]

is it enough for interview purpose