Solving Uber Frontend Interview Question | Interactive Shape

In this video, we will solve a front-end interview question from top companies like Uber. We will build an interactive shape based on the given data. The user can interact with the shape. We will take care of multiple edge cases, talk about effects, and lots of other fundamental concepts.

Try now using the links below

You can support our channel via:

************************************************************
Devtools Tech is a YouTube channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".

Team Members:
Yomesh Gupta

#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************

[DevtoolsTech]

Other top questions --

[mumarqayyum]

Please make more videos like these. Despite being a developer with 3 years of experience, I have literally learned at least 3 to 4 new things in just 26 minutes of absolutely smooth explanation.

[ashmeetsingh]

I did not think of using event delegation and attributes to record which box is clicked 😅😅😅. Awesome video

[jj_tech_gate]

First time i watched, i realized many things i dont know 😅😂 but i enjoyed and i will watch again and again, not only for logic also for improving eng😂

[vyapakkhare]

To make the code more flexible and scalable, before flattening the 2d array, you can make a ref of the number of columns and rows. And then write inline styles to repeat the grid template accordingly. This way, even a rectangular shape can be rendered.

[travelrichardparker]

This video I watched randomly, but worth for wach learn many things. Thank you

[kamal-purohit]

Learned alot! tried to solve it myself but couldn't at 1st go. thanks to you learned so many important and new stuff. <3

[syncmaster]

Hey man! Thanks for another great video. I had a few questions here: 1) Why flatten the array? The 2D array provided might have the row and column details but when you flatten, you might lose that and is being hard coded to 3 columns and n rows. 2) Using of non-primitive data structures in the dependency array, wouldn't it defeat the purpose of memorizing?


Also, I left you a message on reddit yesterday, I just wanted to thank you for the platform and the videos!

[ankitagarwal]

Thank you! I am learning the way how you are explaining tradeoffs why to DS to choose, explaining technicalities

[midhlajap]

Thanks man, one thing that came to my mind is while unloading, instead of using unloading state to control the click event, we can get the parent div element and make its pointer-events to none

[shubhamsingal]

Instead of using shift method which is O(n), we can just make use of closures and create a variable for index in unload, and use that to get value from keys array, then increment it afterwards

[MrTyagi-rrvg]

in my opinion, using setInterval instead of setTimeout may be better option, and clear the interval when all the card deselection completed.

[devLeopards]

Thanks for this types of videos and questions. also you well explained ✌✌

[mrpocketsss]

An optimization to add is to make unloading a ref. It isn't technically state, as it only serves to short-circuit the click handler. The benefit is that a ref won't cause a render cycle, where the useState would

[rajatmaheshwari]

I feel like while the current approach works, it relies on a React "quirk" rather than a feature. Essentially, the point of creating the removeNextKey was to get around the problem of stale state which would otherwise cause the keys to be set to the old state again and again (thus never unloading). I think a better approach is to create a new state variable called unloading, and when the unload function is called for the first time, set the unloading state variable to true, this will cause all effects to be propagated through only the one useEffect which increases predictability and readability.

The flow would be:
The selected boxes exceeds the length of the boxes
useEffect triggers unload
unload -> setUnloading(true)
unload -> update state of the set
This update triggers the useEffect again
Since unloading is true, the unload function is called again with the new updated state
Terminating condition is simply the keys running out

Keeping a single source of truth to state updates is pretty essential IMO

[ashishtiwary]

I have one point to raise, at the time of selecting set over objects, you said it's not reliable, i agree with you on that but set is also not reliable because there is no guarantee of getting the data in the same order of insertion. May be we can use array with the checks of existing indexes

[rishabhkumar]

In your opinion, what is the difficulty level of this problem?
Great Video.

[fiskebent]

Was it stated somewhere that the data always will be 3x3? The CSS is hard coded to 3 columns, so if you get a 4x4 grid, it'll look weird. But otherwise great stuff. I learned a lot!

[yoursshahnawaz]

Very interesting problem and you explained it really well, thanks ❤

[learningjoe]

Really Nice. Would like to learn more. Subscribed and bell icon clicked.