I recently was adding support for dynamic data (meaning loaded from API) to the design system component. I started as usual - add new props indicating that for example, the Combobox
component is loading
or that it has its input value changed so I can hook into that and ask API. I added them to Combobox
directly so I have more or less those props on the component level:
<Combobox loading={true} onInputValueChanged={callAPI} />
At first look, it seems like this component is ok - it has all props it needs to work. But can I do better? What about having a new component for this case? So I will have:
<Combobox /> // static data
<DynamicCombobox loading={true} onInputValueChanged={callAPI} /> // dynamic data
Why it is better? I think mainly because it follows React principle of composition. I can have a base combobox that shares functionality between static and dynamic. Another pro is that in the second case, it is harder to make the impossible state possible. What does it mean? If static Combobox
does not have a loading
prop I can't mess with it and set it to true
when there is no call to API.
There is one more question: how do I share common parts between Combobox
and DynamicSelect
? I think there are at least 2 options:
-
BaseCombobox
component - it will have all common parts of combobox: input, list of items to select, etc. - common functions, CSS classes - it is more granular as you compose your component from small pieces rather than full component
Top comments (0)