Performance-Optimized Data Grid

A React component library for rendering large datasets with optimized performance using memoization techniques.

Capabilities

Efficient data filtering

• Given an array of 1000 user objects with properties name, email, and age, and a search term "john", the component filters and displays only matching users without unnecessary re-computation @test
• When the search term changes from "john" to "jane", the filter computation runs only once for the new search term @test

Optimized event handlers

• Given a list of 100 items, clicking the "Delete" button on any item triggers the delete handler for only that specific item @test
• When re-rendering the parent component with the same data, the delete handler functions maintain referential equality and do not cause child components to re-render @test

Computed statistics memoization

• Given an array of user objects with numeric age values, the component calculates and displays the average age only when the data array changes @test
• When props other than the data array change (such as a theme prop), the statistics are not recalculated @test

Implementation

@generates

API

import { FC } from 'react';

export interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

export interface DataGridProps {
  data: User[];
  searchTerm: string;
  onDelete: (id: number) => void;
  theme?: 'light' | 'dark';
}

/**
 * A performance-optimized data grid component that displays user data
 * with filtering capabilities and computed statistics.
 *
 * The component efficiently handles large datasets by memoizing expensive
 * computations and stabilizing callback references.
 */
export const DataGrid: FC<DataGridProps>;

Dependencies { .dependencies }

react { .dependency }

Provides React hooks and component functionality for building the data grid with performance optimizations.

@satisfied-by