Bro while selecting backwards, lets say suppose from 45-23, it was not selecting the grid properly only two elements were selected. So what i did, i added a if else, like if the startbox value is greater than endbox then we will loop from max to min. Else we will loop from min to max. Let me know what do you think of this!!! Code snippet: if (startBox > endBox) { for (let row = maxRow; row >= minRow; row--) { for (let col = maxCol; col >= minCol; col--) { selected.push(row * cols + col + 1); } } } else { for (let row = minRow; row
Why is use Callback necessary? This function only executes when the mouse is in pressed state with the newest argument. Online Ai software says, it will prevent execution of stale copies!! And Google's Bard is getting confused with my repetitive questions/suggestions 😸.
Could you please elaborate more on why we used the callback function, I tried the code without the callback function and it did not show expected behavior. Could you explain the reason behind it? With that question, if using the callback function also changes the expected behavior, do we need to use it compulsorily and not just for performance boost?
"You should only rely on useCallback as a performance optimization. If your code doesn’t work without it, find the underlying problem and fix it first. Then you may add useCallback back." - React Docs. Could you explain a way which would give the expected behavior without the hook ?
const selected = [startBox]; will fix the error. as we are loosing the initial box when the function runs again, so we need to fix this so that it runs as expected even without the callback function.
I feel that he used the useCallback because since only 3 functions are there and everything the component is rendered, it'll create the function again. To stop that he used useCallback so that the function definition is done only once.
@@anuragdas1978 A very important point you noticed my friend. I also encountered the same issue while coding myself and took me a lot of time to debug it.
Reverse logic is buggy in the demo due to the setSelectboxes updating on every mouseenter, set the startBox to it's own useState and clear it on mouseUp. Refer to this state variable inside the handleMouseEnter and it works fine.
@@RoadsideCoder but introduction video is too scary right.i want your reaction about that 🥲.iam totally demotivated bro ,I don't know what I need to study ,i studied HTML,css,and JavaScript by my self ..but now I think that my effort ,everything is big zero ,and wasted time .
@@RoadsideCoder “machine” coding? What kind of a term is that? Leave it to Indian companies and interviewers to make up their own illogical terms. Obviously a computer is a “machine”. And obviously you’re going to have to “code” in an interview FOR a programming job. From what I can Google and what you told me the idea behind it is actually great - to build something practical and actually interesting with best practices instead of puking out the usual LeetCode DS/A style problems but I take big issue with the phrase “machine coding”. The term makes 0 sense and I haven’t ever encountered it outside of Indian interviewers. Really cool video though, thanks for sharing. All the best!
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/n.gif)
Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)
Bro while selecting backwards, lets say suppose from 45-23, it was not selecting the grid properly only two elements were selected.
So what i did, i added a if else, like if the startbox value is greater than endbox then we will loop from max to min. Else we will loop from min to max. Let me know what do you think of this!!!
Code snippet:
if (startBox > endBox) {
for (let row = maxRow; row >= minRow; row--) {
for (let col = maxCol; col >= minCol; col--) {
selected.push(row * cols + col + 1);
}
}
} else {
for (let row = minRow; row
Thanks for these kind of real world problem solving videos.
It really helps allot.
Hats off to your dedication. My Interviewer recently asked me to code tic tac toe game, could you please make a video on that
Very Soon!
Which company interview?
I figured out the error. const selected = [startBox]; this will fix your code@@RoadsideCoder
Great content thank you my brother 🎉❤
Much appreciated
Why is use Callback necessary? This function only executes when the mouse is in pressed state with the newest argument.
Online Ai software says, it will prevent execution of stale copies!!
And Google's Bard is getting confused with my repetitive questions/suggestions 😸.
This video is greatly explained brother
For finding row
We can write
(boxnum%rows)-1
Thank you for the wonderful video bro, it is so helpful for me and my team, thanks again bro
Always welcome
You added isMouseDown dependency in the useCallback. Can you please explain what exactly it is doing
great!!!
Thanks🎉
Interesting ❤❤❤
Good job!
Could you please elaborate more on why we used the callback function, I tried the code without the callback function and it did not show expected behavior. Could you explain the reason behind it? With that question, if using the callback function also changes the expected behavior, do we need to use it compulsorily and not just for performance boost?
"You should only rely on useCallback as a performance optimization. If your code doesn’t work without it, find the underlying problem and fix it first. Then you may add useCallback back." - React Docs. Could you explain a way which would give the expected behavior without the hook ?
const selected = [startBox]; will fix the error. as we are loosing the initial box when the function runs again, so we need to fix this so that it runs as expected even without the callback function.
I feel that he used the useCallback because since only 3 functions are there and everything the component is rendered, it'll create the function again.
To stop that he used useCallback so that the function definition is done only once.
@@anuragdas1978 A very important point you noticed my friend. I also encountered the same issue while coding myself and took me a lot of time to debug it.
Amazing
Hi bro,
While selecting upwards. Its not working as expected bro. Please give me a solution for that
All we need to do is to take a look at code and requirements.txt file.
I managed to implement this but it took me 1.5 hours. Is this ok? I don't think I could implement this in 20 minutes or so.
❤
Do they ask these questions to people with experience less than a year ?
No bro it is for 5+
If the interviewer except more they can ask
import React, { useState } from 'react';
const GridBoxSelect = () => {
const numRows = 10;
const numColumns = 15;
const boxes = Array.from(
{ length: numRows * numColumns },
(_, index) => index + 1,
);
const [isMouseDown, setIsMouseDown] = useState(false);
const [selectedBoxes, setSelectedBoxes] = useState([]);
const [startBox, setStartBox] = useState(null);
const handleMouseDown = (index) => {
setIsMouseDown(true);
setStartBox(index);
setSelectedBoxes([index]);
};
const handleMouseEnter = (index) => {
if (isMouseDown && startBox !== null) {
const newSelectedBoxes = getBoxesInRange(startBox, index);
setSelectedBoxes(newSelectedBoxes);
}
};
const handleMouseUp = () => {
setIsMouseDown(false);
setStartBox(null);
};
const getBoxesInRange = (start, end) => {
const startRow = Math.floor((start - 1) / numColumns);
const startCol = (start - 1) % numColumns;
const endRow = Math.floor((end - 1) / numColumns);
const endCol = (end - 1) % numColumns;
const minRow = Math.min(startRow, endRow);
const maxRow = Math.max(startRow, endRow);
const minCol = Math.min(startCol, endCol);
const maxCol = Math.max(startCol, endCol);
const newSelection = [];
for (let row = minRow; row handleMouseEnter(idx + 1)}
className={`bb w-[40px] h-[40px] center font-extrabold ${
selectedBoxes.includes(idx + 1)
? 'bg-blue-300'
: ''
}`}>
{number}
))}
);
};
export default GridBoxSelect;
Great video but just wanted to say t
he logic for selecting the grid is not correct it is not selecting as we required
How do u require? Its working fine for me.
@@RoadsideCoder While selecting in a reverse fashion, it doesn't respect the initial starting point. I believe that is what is being asked.
Reverse logic is buggy in the demo due to the setSelectboxes updating on every mouseenter, set the startBox to it's own useState and clear it on mouseUp. Refer to this state variable inside the handleMouseEnter and it works fine.
Bro please do a video about Devin 😢
What type of video? Its not even launched yet
@@RoadsideCoder but introduction video is too scary right.i want your reaction about that 🥲.iam totally demotivated bro ,I don't know what I need to study ,i studied HTML,css,and JavaScript by my self
..but now I think that my effort ,everything is big zero ,and wasted time .
@@Abiram77 if you have no confidance on yourself then it will take your job oherwise big no (atleast 5 years)
What the heck is “machine coding”? Bruh.
Its a frontend interview round where you are asked to build a small app in given time.
@@RoadsideCoder “machine” coding? What kind of a term is that? Leave it to Indian companies and interviewers to make up their own illogical terms.
Obviously a computer is a “machine”. And obviously you’re going to have to “code” in an interview FOR a programming job.
From what I can Google and what you told me the idea behind it is actually great - to build something practical and actually interesting with best practices instead of puking out the usual LeetCode DS/A style problems but I take big issue with the phrase “machine coding”.
The term makes 0 sense and I haven’t ever encountered it outside of Indian interviewers.
Really cool video though, thanks for sharing. All the best!