/pair-coding

Pair coding task

Problem Statement:

Create a dynamic component renderer that can efficiently handle large lists of components with varying update frequencies. This test will combine algorithmic thinking, performance optimization, and framework-agnostic JavaScript skills.

Task Details:

  1. Create a function that generates a large array of component data (1000+ items).
  2. Each component should have the following properties:
    • id: unique identifier
    • type: string (e.g., 'text', 'image', 'button')
    • content: string or object
    • updateFrequency: number (milliseconds, how often the component should update)
  3. Implement a main renderer function that takes this array and efficiently renders the components.
  4. Optimize the rendering process to minimize unnecessary updates and improve performance.
  5. Implement a way to measure and display the rendering performance.

Please utilise the tools that you confortable with to complete this test.

// Generate component data
function generateComponentData(count) {
  // TODO: Implement this function to generate an array of component data
}

// Main renderer function
function DynamicComponentRenderer({ components }) {
  // TODO: Implement the renderer logic here
}

// Performance measurement wrapper
function withPerformanceMeasurement(WrappedComponent) {
  // TODO: Implement a higher-order component for performance measurement
}

// Usage example
const componentData = generateComponentData(1000);
const MeasuredRenderer = withPerformanceMeasurement(DynamicComponentRenderer);

// React example (can be adapted for Vue or mini program)
function App() {
  return <MeasuredRenderer components={componentData} />;
}