React JS Interview Questions ( Selectable Grid ) - Frontend Machine Coding Interview Experience

➡️ My Frontend Interview Preparation Course - roadsidecoder.com/course-details (50% Discount)
🟪 My Instagram - / roadsidecoder
➡️ Book an Interview Preparation call with me - topmate.io/roadsidecoder
React Interview Question on building a Selectable Grid will be discussed in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
00:24 Setup New React App
02:04 Building the Grid
07:26 Grid Selection Logic
14:41 Reverse selection logic
17:20 Highlighting Selected Boxes
18:31 Optimisation with useCallback
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

Roadside to Dream Job - Frontend Interview Prep Course 🔥🔥
roadsidecoder.com/course-details (50% Discount for limited time)

[@arkadas2634]

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

[@saiphaneeshk.h.5482]

Thanks for these kind of real world problem solving videos.
It really helps allot.

[@asifali_official3137]

This video is greatly explained brother

[@parikshitgupta343]

You added isMouseDown dependency in the useCallback. Can you please explain what exactly it is doing

[@MrColins710]

Good job!

[@ankushladani496]

For finding row
We can write
(boxnum%rows)-1

[@pravinprince3221]

Thank you for the wonderful video bro, it is so helpful for me and my team, thanks again bro

[@RoadsideCoder]

Always welcome

[@iftekhar_ansari]

Interesting ❤❤❤

[@user-ck8vg9bd6v]

Great content thank you my brother 🎉❤

[@RoadsideCoder]

Much appreciated

[@swayamprakashsahoo9002]

Thanks🎉

[@glasscoder]

All we need to do is to take a look at code and requirements.txt file.

[@RavindraSingh-lp9pl]

Amazing

[@arulgurukarthikeyan3449]

Hi bro,
While selecting upwards. Its not working as expected bro. Please give me a solution for that

[@Aviralsingh-yw7xx]

Hats off to your dedication. My Interviewer recently asked me to code tic tac toe game, could you please make a video on that

[@RoadsideCoder]

Very Soon!

[@karunasagarks5228]

Which company interview?

[@anuragdas1978]

I figured out the error. const selected = [startBox]; this will fix your code@@RoadsideCoder

[@awais_ansarii]

❤

[@zombi1034]

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.

[@anuragdas1978]

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?

[@anuragdas1978]

"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 ?

[@anuragdas1978]

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.

[@saiphaneeshk.h.5482]

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.

[@sanketsarkar9890]

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

[@TonyStark90743]

Do they ask these questions to people with experience less than a year ?

[@JeevanTV-do2hc]

No bro it is for 5+
If the interviewer except more they can ask

[@Abiram77]

Bro please do a video about Devin 😢

[@RoadsideCoder]

What type of video? Its not even launched yet

[@Abiram77]

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

[@omkarjagtap2212]

@@Abiram77 if you have no confidance on yourself then it will take your job oherwise big no (atleast 5 years)

[@HARISHKUMAR-cb4zu]

Great video but just wanted to say t
he logic for selecting the grid is not correct it is not selecting as we required

[@RoadsideCoder]

How do u require? Its working fine for me.

[@amittraspal]

@@RoadsideCoder While selecting in a reverse fashion, it doesn't respect the initial starting point. I believe that is what is being asked.

[@mentix002]

What the heck is “machine coding”? Bruh.

[@RoadsideCoder]

Its a frontend interview round where you are asked to build a small app in given time.

[@mentix002]

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