Uber Frontend Interview Question

Introduction

• Presenter: Ysh Gupta
• Topic: Solving a frontend interview question from Uber's interview process
• Common in machine coding rounds
• Unique to DevTools; not widely found elsewhere

Question Overview

• Given a 2D array representing shape data (values: 1 or 0)
• Render shape using this data:
  • Value 1: Render empty box
  • Value 0: Hide element
• Functional Requirements:
  • Click on an empty box turns it green (selected)
  • Order of selection is important
  • Automatically deselect boxes in the order they were selected once all are selected
  • Disable interaction during the deselection process

Implementation Steps

Initial Setup

• Component Creation: Create shape.js component
• Import Shape: Pass data to the Shape component
• Rendering Error: Fix by rendering a skeleton component

Understanding the Problem

• Break the problem into understandable parts
• Clarify requirements
• Steps for functionality:
  • Create interactive shape based on 2D array
  • Manage box selection and deselection according to specific rules
  • Disable interactions during deselection
  • Maintain order of insertion for correct deselection sequence

Flattening the Array

• Convert 2D array into 1D array for easier manipulation
• Use data.flat(Infinity) and useMemo for optimization

Basic Rendering

• Mapping over the flattened array
• Create a div for each box
• Use index as key
• CSS adjustments for layout

CSS Styling

• Define container and individual box styles
• Use CSS grid for layout
• Hide elements with value 0
• Style for visible and hidden boxes

Adding Interactivity

• Click Handler: Define function to handle box clicks. Capture index and status.
• Event Delegation: Attach event handler to parent to minimize memory usage
• State Management: Use useState to handle selected boxes
• Update Selection: Reflect box selection in the UI by updating states
• Fix: Ensure consistency in data types for state updates

Deselection Process

• Once all boxes are selected, start deselecting in the order of selection
• Use useEffect to manage deselection
• Create and manage deselection timer
• Update set and state accordingly

Handling Edge Cases

• Disallow interaction during deselection using a state flag for unloading
• Apply guard clauses in event handler for robustness
• Optional: Add CSS transitions for a smoother UI experience

Final Enhancements

• Clear timers to avoid memory leaks and ensure a clean state
• Testing and validating the implementation with different selection orders

Conclusion

• Recap of the functional implementation details
• Importance of considering edge cases and optimizations
• Encouragement to share better solutions and provide feedback
• CTA for subscribing and engaging with the content