Wait until you need it
Recently I was working on a creating some form components in React and Next.js for one of my subscription engineering clients, helping get a bit consistency across their UI components.
After building out a <select> component based on its use across their existing site, the client asked (I’m paraphrasing)…
Could we add support for
<optgroup>if anitemhas an array instead of a string as its property value?
It’s not an unreasonable ask. It would make the component a lot more flexible.
But the existing UI doesn’t use that pattern anywhere currently. Maybe it should. Maybe it shouldn’t.
But that’s the conversation I’d want to have first.
Are there places in the UI where
<select>menus are unwieldy because they have too many options? If so, should we use<optgroup>elements to break them into sections, or is there a better way to handle that UI that’s simpler for the user?
Optimizing your code is great!
Optimizing it for an imagined future need that may never come to be, though, just results in code that’s more complex, harder to read, harder to use, and harder to maintain.
Need help with your project? Get in touch.