CodePark/ questions / Component architecture & APIs
START PRACTICINGPRACTICE
Frontend question · Frontend system design › Component architecture & APIs

A Select component keeps growing props: renderOption, showIcons, groupBy, footerContent, optionClassName. Which refactor best stops the prop explosion?

Move to compound components (Select.Option, Select.Group) with a shared context

Compound components (Select.Option, Select.Group) are the best refactor. Consumers write options, groups and footers as children. The parent keeps the selection and keyboard logic in a shared context. "Accept a single config object" is the tempting wrong answer. It only renames the problem, because all the options are still there. Splitting into copies like SimpleSelect and IconSelect duplicates behaviour, and the copies then drift apart over time.