🔴 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
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
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.
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.
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
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.
@@jitxhere 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)
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)?
For performance standpoint: How will we Stop the set Interval after 100%❓ As a newbie, I tried using conditional clear-Interval, but the last 100th%, (if we console log percent value) , the UI is re-rendering twice at the 100th percent value. Anyone any idea!? 😕
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.
I think we can avoid usestate and useEffect in ProgressBar just use dervied state const ProgressBar = ({ value = 0 }) => { const percent = Math.min(100, Math.max(value, 0)); return (
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}%
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
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]);
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); }; }, []);
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 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
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.
You are not clearing the interval when it reaches to value =100, which means even the progress bar not not showing the value above 100 but internally that interval must be continue o increase our value.
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
🔴 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
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
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.
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.
cool bro..nice info
Please do more videos on React JS
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
const [data, setData] = useState(10);
setData(Number(e.target.value))}
name=""
id=""
/>
{data} %
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.
Thats a great idea!
Thanks please make more react stuff.
You are absolutely wondrous.
This series is awesome keep adding more videos like this
Really nice explanation, Thank you!
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.
Please make a video on scoping based questions in js. Great content btw.
Thanks for the video, please do make more videos on Machine coding round.
Great Video sir but you haven't cleared the setInterval ?
Amazing video brother.
Should we not clearinterval inside the useEffect ?
check the pinned comment
@RoadsideCoder Inside ProgressBar Component, do we really need to use useState/useEffect? (as component will rerender everytime the value changes)
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
@@jitxhere 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)
i fully agree
Great video
Why haven't you used the tag for this I think it's supported by most browsers?
Also I would like to request you to make video on socket only like how it works and all its methods
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)?
if u add a cleanup for setInterval, It won't be called everytime
For performance standpoint: How will we Stop the set Interval after 100%❓
As a newbie, I tried using conditional clear-Interval, but the last 100th%, (if we console log percent value) , the UI is re-rendering twice at the 100th percent value. Anyone any idea!? 😕
useEffect(()=>{
const timer = setInterval(()=>{
setValue(val=> val + 1)
},100)
return ()=> clearInterval(timer);
},[]);
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
the timer keeps on running isnt that bas for performance?
We can clear the interval once its complete, that will not keep it running.
Hi, was this a live machine coding round? If it was, were you allowed to use internet ?
Yes live, you can use internet for some things, ask the interviewer if he/she allows
very interesting
that's great Piyush but what about setInterval it is still running. Can we use clearInterval inside setState.
yes i think he missed this part to clean that setInterval
Yes that was supposed to be ur task, I forgot to mention it
awesome
the value are getting updated in multiples of 2 , even if we are doing val = val+1 . has nobody noticed this ??
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.
Good video
I think we can avoid usestate and useEffect in ProgressBar just use dervied state
const ProgressBar = ({ value = 0 }) => {
const percent = Math.min(100, Math.max(value, 0));
return (
49 ? "white" : "black" }}>
{percent.toFixed()}%
);
};
Good day greetings
I would be better if you simulated it with a promise function as that is the point of the progress bars to track promises
That was not the part of requirement
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}%
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
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]);
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);
};
}, []);
Bhai kindly reply apki mern chat application wali deployment pr render card mang raha he solve this
check my last video, I have done it
Hi Piyush,
If you see the value
is increasing by 2 not 1 could you please explain ?
just change it in setInterval
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
The requirement didn't allow to use input progress
@@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
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.
color on progressbar not getting apllied wrote the same code
The interval won't stop you should have stopped the state update on the parent component.
Check pinned comment
Instead of doing those Math.min and Math.max can't we use clearInterval?
Bhaiya kya appki js and react ki series enough hai as a fresher job placement ke liye
yes
where did you learn react brother
Bro im getting issue in real time messages please help i am at the end of project mern chat app plzz help
color not getting applied although followed the same code
these kind of questions asked in interview for freshers?😊
yes
won't it would have been better to use the native progress type input?
Maybe the native progress bar wont be able to match the styles/features provided by the UX.
@@qvikk333 its possible if we reset the appearance property of the input
You are not clearing the interval when it reaches to value =100,
which means even the progress bar not not showing the value above 100 but internally that interval must be continue o increase our value.
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)
}
}, [])
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
bro u didnt even stop the setinterval. rip how 60k subs
Check pinned comment lol
Please clear the intervel🎉
Yes that was supposed to be ur task, I forgot to mention it
react js progress bar add to backend tell this not design
bro you forgot to clear the interval
nice optimization man, you just run infinity loop ... for those who watching, don't do like that. You will definitely will not pass interview.
check the pinned comment, I have given this as a homework
Why your are not talking in hindi 😢
Will u talk in hindi during ur interview?