React JS Interview Questions ( Progress Bar ) - Frontend Machine Coding Interview Experience

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question on building a Progress Bar will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
👤 Join the RoadsideCoder Community Discord -
/ discord
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) -
topmate.io/roadsidecoder
🟪 Follow me on Instagram and u will clear your interview 🤓 -
/ roadsidecoder
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 Map, filter and reduce -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:13 Problem Explanation
01:38 Basic UI
06:49 Simulating Progress Functionality
08:39 Handling min/max Edge cases
11:25 Progress FIll Animation
11:53 Adding Fill Animation
12:39 Handling Progressbar overflow
13:41 Percentage text color change
14:22 Adding Accessibility
17:54 Constants refactoring
19:01 Follow up Question
21:00 Make it Scalable
23:00 Next Steps
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-detail 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/ ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder

[@sudheertalapudi1382]

There is a catch in your program your using useState for making progress bar right it will re-render the entire component not only the progress bar component, by using useRef we can clear this issue by using the current prop off useRef

[@merajali938]

Hi Piyush, Good job. Below is the code I used for optimizing as the setVal value is continuously being updated. const [val, setval] = useState(0) let data = 55 useEffect(() => { let x = setInterval(() => { if (val === data) { clearInterval(x) } else { setval(prev => prev + 1) } }, 100); return () => { clearInterval(x) } }, [val, data]). Is that valid method to use, pls check. Thank you.

[@nandyalasudharshan6859]

Please do more videos on React JS

[@adityakeri2881]

One important optimization here would be to go with a Composited property like `transform` instead of a Non-Composited property like `width`. This is because, whenever you change the width (non-composited property), a Reflow/Layout change happens. Which means the browser needs to calculate the position or layout of all the elements around it. In this case, since all we're building is a simple Progress Bar and nothing else, this optimization may not matter. But in interviews and real world scenarios, it sure does. The logic is as simple as : ``` style={{ transform: `translateX(${calculatedProgress - 100}%)` }} ``` Also, this is how shadcn-ui implements its Progress bar.

[@mohammedsadiq1567]

cool bro..nice info

[@PROTECHRAHUL]

This series is awesome keep adding more videos like this

[@rahulkr7349]

Really nice explanation, Thank you!

[@itsMohak]

You are absolutely wondrous.

[@manojsatwase]

missing one step optimaze when we swtich between one page to other useEffect(()=>{ const timer = setInterval(()=>{ setValue(val=> val + 1) },100) return ()=> clearInterval(timer); },[]); thank for the making this type of video also make video on circle progress-bar

[@allpeace1]

Thanks for the video, please do make more videos on Machine coding round.

[@suyashsrivastava3671]

Please make a video on scoping based questions in js. Great content btw.

[@prashlovessamosa]

Thanks please make more react stuff.

[@ignalone5199]

Hi Piyush 👋can you please make a video on debugging in React js on large projects. Just wanna know and learn how an experienced developer debug the code and tackle issues.

[@RoadsideCoder]

Thats a great idea!

[@mambaop8296]

Hey but the settimeout is still running, why don't we just use return above that timeout function so value get returned when it will be 100.

[@themeniacs7376]

Great video

[@PROTECHRAHUL]

Also I would like to request you to make video on socket only like how it works and all its methods

[@Dev-Phantom]

very interesting

[@lazyjinchuriki1335]

Why haven't you used the tag for this I think it's supported by most browsers?

[@shortflicks83]

I am still waiting for your DSA Series next video dear. Man please upload video of this series we really need this series a lot

[@investneur8232]

awesome

[@coderRox]

fixed the setInterval part as - useEffect(() => { let timerId = setInterval(() => { setValue((val) => { const newVal = val + delta if (newVal > 100) { clearInterval(timerId) return 100 } return newVal }) }, 100) return () => { clearInterval(timerId) } }, [])

[@abhisheksoni4254]

Good video

[@mohd.irfanlohar4544]

Great Video sir but you haven't cleared the setInterval ?

[@RomeshJainn]

const [data, setData] = useState(10); setData(Number(e.target.value))} name="" id="" /> {data} %

[@priyanshichauhan4547]

the value are getting updated in multiples of 2 , even if we are doing val = val+1 . has nobody noticed this ??

[@nandayelgar2818]

Will this progress work between two components. I mean when user clicks button progressbar starts and button navigates to another page, so i want this progressbar to continue updating the status.

[@KaustavOP]

Amazing video brother. Should we not clearinterval inside the useEffect ?

[@RoadsideCoder]

check the pinned comment

[@nishantshah_]

We can clear the interval once its complete, that will not keep it running.

[@mrrishiraj88]

Good day greetings

[@heyhustlers]

Ok code is working fine, but there was a problem, just console value of app components, It create a endless loop. value was increasing every 100ms. I think you need to notice and fix it.

[@rylenlobo6438]

the timer keeps on running isnt that bas for performance?

[@rivunaskar3005]

Instead of doing those Math.min and Math.max can't we use clearInterval?

[@ekamahuja9306]

Wouldn’t the ProgressBar in this situation keep calling the onCompelete function on every time the value changes in the parent (for example.g to 101%, 110% etc)?

[@RoadsideCoder]

if u add a cleanup for setInterval, It won't be called everytime

[@__aj2000__]

@RoadsideCoder Inside ProgressBar Component, do we really need to use useState/useEffect? (as component will rerender everytime the value changes)

[@jitx2797]

rendering is never a problem unless it is a costly rerender. React embraces rerender and most of the time you don't have to worry about it

[@__aj2000__]

@@jitx2797 no i m talking about simplifying code: like instead of using useEffect: const percent = Math.....; will work - without using any hook (as component re-renders, so percent will be calculated every time anyways)

[@bopatzable]

i fully agree

[@YASH-ju4yv]

Bro im getting issue in real time messages please help i am at the end of project mern chat app plzz help

[@PratibhaSharma-r3i]

color on progressbar not getting apllied wrote the same code

[@PratibhaSharma-r3i]

color not getting applied although followed the same code

[@abhisheklohani8034]

Hi Piyush, If you see the value is increasing by 2 not 1 could you please explain ?

[@RoadsideCoder]

just change it in setInterval

[@elijahmalewo1683]

I would be better if you simulated it with a promise function as that is the point of the progress bars to track promises

[@RoadsideCoder]

That was not the part of requirement

[@shahnawaz7863]

that's great Piyush but what about setInterval it is still running. Can we use clearInterval inside setState.

[@factzClips]

yes i think he missed this part to clean that setInterval

[@RoadsideCoder]

Yes that was supposed to be ur task, I forgot to mention it

[@blackpurple9163]

Why didn't you use input type="progress" instead? That would be much better for accessibility, will have default attributes for min, max and current, I want to know why you used divs and spans instead

[@RoadsideCoder]

The requirement didn't allow to use input progress

[@blackpurple9163]

@@RoadsideCoder ooh, that explains it, btw I'm a beginner mern stack developer and I'm struggling to get a job, I'm mostly scared of the machine tests, many of the companies usually have some difficult questions, even tougher than this, like for instance in an interview they told me to build a vending machine app that the user used to order tea and/or coffee, with and/or without sugar, with and/or without milk, all the ingredients were to be kept in check, if their units went below a certain threshold in the inventory there was supposed to be a notification sent, when the inventory was refilled there would be another notification, and the user (customer) had to be given a bill (not print it or anything, just tell them their order's price) It was all very very very difficult for me, even though I didn't learn react at that time, after learning react I still can't figure out how to make such an app, if you can, please make this in the next episode If you'd like I'll tell you what the question was in more detail, they asked me back in November so I'll try to remember exactly what it was, but it was mostly what I described above

[@shivanshsharma4916]

where did you learn react brother

[@rishabhbajpai648]

Hi, was this a live machine coding round? If it was, were you allowed to use internet ?

[@RoadsideCoder]

Yes live, you can use internet for some things, ask the interviewer if he/she allows

[@irtezasiddiqui9509]

Bhai kindly reply apki mern chat application wali deployment pr render card mang raha he solve this

[@RoadsideCoder]

check my last video, I have done it

[@sachinsingh-jb7td]

The interval won't stop you should have stopped the state update on the parent component.

[@RoadsideCoder]

Check pinned comment

[@bikidas5473]

won't it would have been better to use the native progress type input?

[@qvikk333]

Maybe the native progress bar wont be able to match the styles/features provided by the UX.

[@bikidas5473]

@@qvikk333 its possible if we reset the appearance property of the input

[@bhuvanaeswari6555]

Hi i am 43 years old i have got 1 year experience as reactjs developer now iam open to work can join immediately is there any possibility to get remote job

[@bhaveshsaxena9861]

Bhaiya kya appki js and react ki series enough hai as a fresher job placement ke liye

[@RoadsideCoder]

yes

[@QuietQuests26]

Hi Piyush, the below code works for me for clearing the setInterval, but is there any way to optimize it? useEffect(() => { if (value < MAX) { var interval = setInterval(() => { setValue((val) => ++val); }, 100); } else { clearInterval(interval); } return () => { clearInterval(interval); }; }, [value]);

[@mayurbansal4051]

you have added value in dependency, with mount condition I did it like this useEffect(() => { const intervalID = setInterval(() => { setValue((prev) => { const newVal = prev + 0.4; if (newVal > 100) { clearInterval(intervalID); return 100; } return newVal; }); }, 100); return () => { clearInterval(intervalID); }; }, []);

[@bopatzable]

i feel like the useEffect and state inside proressbar.js aren't needed at all. Why not just do: const percent = Math.min(100, Max.max(0, value)).toFixed() return {percent}%

[@RoadsideCoder]

This can work in current scenario but what if there were more elements involved in this? Then you would need it to make better functionality, so to make sure everyone understands that, I did it

[@je4775]

react js progress bar add to backend tell this not design

[@premsingh6967]

[@sharoonps4285]

these kind of questions asked in interview for freshers?😊

[@RoadsideCoder]

yes

[@gck3415]

Please clear the intervel🎉

[@RoadsideCoder]

Yes that was supposed to be ur task, I forgot to mention it

[@sandrinjoy]

bro u didnt even stop the setinterval. rip how 60k subs

[@RoadsideCoder]

Check pinned comment lol

[@megabanzaj]

nice optimization man, you just run infinity loop ... for those who watching, don't do like that. You will definitely will not pass interview.

[@RoadsideCoder]

check the pinned comment, I have given this as a homework

[@kptrendingchannel5536]

Why your are not talking in hindi 😢

[@RoadsideCoder]

Will u talk in hindi during ur interview?