Implement, Debug, and Optimize a React Table

Design and implement a reusable Table component in React that supports client-side pagination and column sorting. The table must accept dynamic columns via a columns prop (with accessors and optional custom cell renderers). Decompose the UI into clear subcomponents (e.g., Table, Header, Body, Row, Cell, Pagination) and justify your state design (what lives locally vs. in a parent; controlled vs. uncontrolled props). Follow-ups: 1) Explain how you would make the component extensible (e.g., plug-in hooks for custom sorting/pagination, server-side data mode) and how you would evolve the API without breaking changes. 2) Describe how you would support a mobile responsive layout (e.g., column priority, stacking, or horizontal scroll) and the trade-offs of each. Debug/Performance task: Given an existing React table implementation, identify and fix: a) unnecessary re-renders, b) event binding leaks, and c) misaligned rendering (rows/headers out of sync). Explain how you would detect each issue (e.g., React DevTools Profiler) and the specific code changes you would make (memoization with React.memo/useMemo, stable callbacks with useCallback/useRef, correct keys, proper effect cleanup). Bonus: The table feels very janky under heavy data. Describe a concrete optimization plan: measurement and profiling steps, reducing render work, memoization strategy and dependency hygiene, list virtualization/windowing, batching/debouncing of expensive updates, and how React's shallow comparison and reconciliation influence your approach.