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.
Question link: devtools.tech/...
Support Us: topmate.io/yom...
Try now using the links below
devtools.tech/...
devtools.tech/...
You can support our channel via:
rzp.io/l/suppo...
devtoolstech.g...
www.buymeacoff...
************************************************************
Devtools Tech is a KZbin 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".
Interview questions: devtools.tech/...
Interview resources: devtools.tech/...
Hidden Gem: devtools.tech/...
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: / yomeshgupta
Twitter: / yomeshgupta
#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************

[@DevtoolsTech]

Question link: devtools.tech/questions/s/how-to-create-an-interactive-shape-based-ui-uber-frontend-interview-question-or-javascript-or-react-js---qid---6FVH1ZMWMXd4uZ8WAGEi Best coding practices: kzbin.info/www/bejne/b5iUo4yNf9upsLssi=3KR-lnNf7GCcE_RU Other top questions -- LinkedIn: kzbin.info/www/bejne/bJbYhXWMeah3bNE Facebook: kzbin.info/www/bejne/bXWtdKOdmJuJb5Y Atlassian: kzbin.info/www/bejne/aYDbfqakhZxrsMk Klarna: kzbin.info/www/bejne/hqrCk4ugiLKsisU MakeMyTrip: kzbin.info/www/bejne/r3nKYZWsg9Z9e7M Microsoft: kzbin.info/www/bejne/f6eUmI2EbpVjq8U AWS: kzbin.info/www/bejne/hnfSYo2Hd9tnnqM Custom Loader: kzbin.info/www/bejne/e2GUiZd6hsyteq8 Practice with us: topmate.io/yomeshgupta

[@ashmeetsingh3238]

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

[@DevtoolsTech]

Glad to see you learnt something new today! 🙌🏼

[@adarshshete7987]

Yes, using event handler on parent, I have not used this pattern before, glad to learn this, thank you.

[@AbhishekJain1992]

​@@adarshshete7987 don't do that please. React delegates all the events already. It was core JS code where event delegation was required to avoid attaching events on new child event addition.

[@DevtoolsTech]

@AbhishekJain1992 Please share documentation around it.

[@mumarqayyum9286]

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.

[@DevtoolsTech]

Glad to hear that! More videos coming soon! 🚀

[@ionutsandu5913]

Same here although I don't agree with few stuffs such as using recursion or the event bubbling thing (that will complicate things with typescript) but still great content.

[@travelrichardparker1088]

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

[@DevtoolsTech]

Glad to hear that! Many more coming soon! 🙌🏼

[@DeepakSingh-by3je]

same bro

[@ankitagarwal4914]

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

[@DevtoolsTech]

Glad to hear that! 🙏🏻

[@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😂

[@DevtoolsTech]

Glad to see you learnt something new! More coming soon. 🙌🏼

[@vyapakkhare5642]

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.

[@vyapakkhare5642]

Also, I have an alternate approach, which would require lesser calculations while unloading. If we abstract the Box into a separate component and provide its own state of selected, and on selection, we pass the deselect function as a callback, and add that cb into an array. The moment unloading begins, you can just iterate through this array of callbacks and call the cb. It will deselect in the order of insertion. Rest everything remains the same.

[@DevtoolsTech]

Thanks for sharing your approach! 🙌🏼

[@Farooque7866]

Amazing sir ji 🎉 I am a react developer and I see the first time optimization video.... Great 👍👍👍 keep it up ❤❤❤

[@DevtoolsTech]

Thank you! More to come. 🙌🏼

[@AbhishekJain1992]

No need for new state for loading, set size is good enough.

[@Fam-m4i]

Imagine being asked this question in 45 minutes 😂. I mean people shouldn’t judge a candidate based on a single question . Many would freak out and won’t be able to build it in that period of time.

[@DevtoolsTech]

This is commonly asked in Uber's Frontend roles!

[@Fam-m4i]

@@DevtoolsTech 😂 I’m doomed bro. I can build but in interview it’s whole different game

[@DevtoolsTech]

You need to practice! That is the only way. I don't want self plug but you can try mock interviews. Try something like topmate.io/yomeshgupta

[@devLeopards]

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

[@DevtoolsTech]

More coming soon! 🙌🏼

[@syncmaster320]

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!

[@DevtoolsTech]

I wanted to simplify the problem that is why flatten it. Ideally, it should be configurable and no hard coded CSS. Columns count should change as per the data. If you mean selected then we need an effect whenever it changes. It is a state and unless explicitly changed, we will get the same value across re-renders.

[@rishabhkumar17]

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

[@DevtoolsTech]

It would be a beginner/intermediate problem depending upon the kind of conversation that follows the solution.

[@MrTyagi-rr9vg]

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

[@DevtoolsTech]

Both works in this case. Thanks for the suggestion!

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

[@DevtoolsTech]

Glad to hear that! New video coming out this Sunday. Watch out for that! 🙌🏼

[@learningjoe1823]

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

[@DevtoolsTech]

Thank you! 🙌🏼

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

[@DevtoolsTech]

In the question, it was mentioned it is 3x3 for now. However, I agree we can go for a configurable approach where grid of any size should work.

[@rajatmaheshwari2512]

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

[@DevtoolsTech]

I don't think it is a quirk. Both approaches work fine. Thanks for sharing! 🙌🏼

[@shubhamsingal3566]

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

[@DevtoolsTech]

Could you please share the code? Thanks!

[@kYt0-cz3hk]

@@DevtoolsTech I JUST STARTED LEARNING HTML CSS JS, AND IM SHOCKED TO SEE ALL THESE THINGS IN FRONTEND

[@DevtoolsTech]

@@kYt0-cz3hk There is a lot more. You will learn with time and efforts. Just keep at it!

[@kYt0-cz3hk]

@@DevtoolsTech but i didt knew all this existed sadly, any way i can atleat know what all things exist

[@DevtoolsTech]

May be try roadmap.sh for a structured learning.

[@freecourseplatformenglish2829]

Thanks Yomesh, I would like to mention that 5th point in functional requirement of this question is a bit confusing "During de-selection, user should be able to select a new box as in disable any box interaction." Can you please fix it.

[@DevtoolsTech]

Hi, thanks for pointing it out. I will fix it! 🙌🏼

[@divyanshsrivastava9571]

what if instead of using opacity zero, I choose not to even render the box if the array element is 0, do we still need that if condition 12:39 ? Btw I solved it but looking at your code there's a lot of improvement needed for optimisation 😝

[@DevtoolsTech]

I chose to render to keep the UI consistent and not run into issues where CSS behaves weirdly due to missing elements. If it works well for you then you can skip conditions. I am glad you learnt something new! 🙌🏼

[@KuldeepSingh-fg4wn]

I did not get the purpose to make it flatters i mean that data could be indicate allocation of row and column some how also can’t we just simply count what the length of array and how many box are selected once both match it should refresh all box…

[@DevtoolsTech]

There could be multiple ways to solve it. Making it flat just simplifies the logic. We can do with flat too and change the logic. Feel free to implement it and share it with all. Thanks! 🙌🏼

[@ADITYAKUMAR-vt6yo]

Two query : const removeFill = ()=>{ if(allSelectedKeys.length){ const currentKeys = allSelectedKeys.shift(); setClickedCells(prev=> { const updatedKey = new Set(prev); updatedKey.delete(currentKeys); return updatedKey; }) setTimeout(removeFill,500) } } setTimeout(removeFill,100) why we are doing const updatedKey = new Set(prev);

[@DevtoolsTech]

We are creating a copy and removing keys from it. We don't want to mutate original value.

[@ashishtiwary914]

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

[@DevtoolsTech]

In Set, order of insertion is preserved. I used it because order of insertion is preserved and look up is O(1)

[@AbhishekJain1992]

Please don't teach wrong things. React does the delegation itself.

[@DevtoolsTech]

Please share a valid resource or documentation to backup your claim.

[@AbhishekJain1992]

@@DevtoolsTech you can read about it in official document on react synthetic events.a

[@AbhishekJain1992]

@@DevtoolsTech ChatGPT - In React, event delegation is automatically handled to some extent through a mechanism called Synthetic Events. React doesn't attach event listeners directly to child DOM nodes. Instead, it attaches them to the root node (usually at the document level or the component's root). This is part of React's event handling optimization. Gemini - While React doesn't explicitly mention "event delegation" in its documentation, it does implement it under the hood. Here's what you need to know: How React handles event delegation: Root Container: In React 17 and later, event listeners are attached to the root DOM container where your React app is rendered. This means that a single event listener at the root handles events for all your React components. Event Bubbling: React leverages event bubbling, where events triggered on a child element propagate up the DOM tree until they reach the root. This allows React to capture events on any component within your application. Synthetic Events: React uses synthetic events, which are cross-browser wrappers around native DOM events. This ensures consistent event behavior across different browsers.

[@DevtoolsTech]

Thanks for sharing. I will read about it. Could you please your LinkedIn so that others folks can connect and learn from your knowledge too. Thanks!

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

[@kYt0-cz3hk]

I JUST STARTED LEARNING HTML CSS JS, AND IM SHOCKED TO SEE ALL THESE THINGS IN FRONTEND

[@suhailriyaz6612]

let arr = [] let getState = [] const statesArr = (n)=>{ return Array(n).fill(0) } const handleClick = (index)=>{ arr.push(index) getState[index] = 1 if(arr.length === getState.length){ setTimeout(() => { deSelect() }, 2000); } console.log('select:',getState) } const deSelect = () =>{ i = 0; while(i { handleClick(element) }); } main()

[@DevtoolsTech]

This doesn't solve the question mentioned in the video. There is no event handler. You are setting the indexes to true in a sequence and then deselecting them. It is a partial solution.

[@suhailriyaz6612]

@@DevtoolsTech ok sir

[@mohitashliya8750]

So this is how elite devs code like

[@DevtoolsTech]

Hahaha 😅

[@shubhanshusahuu]

Is Flattening the array is good idea?, what about scalability? I think it will afftect scalability, how will you tackle that?

[@DevtoolsTech]

You can do both ways. Unless you have thousands/lakhs of boxes in the shape, the flat is quite fast. We can optimise if we feel there is a bottleneck after measuring.

[@shubhanshusahuu]

@@DevtoolsTech i was not talking about optimization, maybe that 2d array can be there for a reason, and any new requirement comes and now we lost the track of the nested arrays, in that case we need to change logic right?

[@DevtoolsTech]

You can't predict what all requirements can come. Solve for the current problem unless current changes create a major tech debt. There could be n of future changes, what all can you accommodate without knowing the changes? It can lead to logic change or it might not.

[@sunnygante9867]

Roadside coder also solve this type of question few months back

[@DevtoolsTech]

Haven't seen his video yet. More the no. of resources better for us all! 🙌🏼

[@yoursshahnawaz]

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

[@DevtoolsTech]

Thank you! Many more to come. 🙌🏼

[@karthikm.1804]

What is the salary range for frontend developer at uber

[@DevtoolsTech]

Depends upon many factors like experience, skills, profile, and more but it is good

[@karthikm.1804]

@@DevtoolsTech how much one can expect with 1-2 years of experience?

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

[@DevtoolsTech]

Thanks for the suggestion! I did that to be double sure incase some css overrides happen!

[@bikidas5473]

? was it to be solved using a ui framework or plain JS dom mainpulation will work?

[@DevtoolsTech]

Question was asked using React.js but could be solved with Vanilla JS.

[@DemystifyFrontend]

Awesome 🎉

[@mohnishsawlani]

experience level for this interview round ?

[@DevtoolsTech]

SDE 1/SDE 2

[@shubhamverma3873]

I learned something new, today.

[@DevtoolsTech]

Glad to hear that! 🙌🏼

[@iganic7574]

Source code?

[@DevtoolsTech]

Will share soon.

[@Manoj-qn3qw]

Was really helpful and think I learnt something new, thank you !

[@DevtoolsTech]

Glad to hear that! 🙌🏼

[@ankushladani496]

Thanks Bhaiya...❤😊

[@DevtoolsTech]

You are welcome! ♥️