Most performant way to check props against a massive list?
I'm building a component that takes in a large amount of boolean props and uses the prop key as a className value. I was thinking of building an array of starting values that can be used to check each prop against, in order to determine which props are valid as a className. However, iterating through this array for each prop is not very performant.
I know I can check each prop for values it can't be, like "aria", camelcase etc. But still, for valid props it will need to iterate through the array with an O(n*i) which is not ideal.
Perhaps there is a different approach to this problem?
8 Replies
how many is "a large amount"? if iterating your props is causing perf issues i imagine there's a better way to handle those props
200-ish possible values a string could begin with
Have you looked into maps? If you have unique keys itll give you o(n) look up for an array of keys
Hmm, well I'd have to include every possible value in the map right? Not sure how realistic that would be. Right now I'm just checking what the props begin with, which brings it down to a couple hundred.
for example, text-3xl and text-red-300 both use the same
text- entry to verify
Hmm, although potentially I can make this work as most values start with the same substring. Unique values can just exist in the map as is.
Thank you for the ideaYou could also try a trie
Thanks that also looks promising
np np lmk what you end up doing cause I'm also 
Don't forget useMemo
And it's tough to give advice beyond that as we don't know where the data is coming from and where it's going for what purpose. There might be ways to move the validation outside the component, to cache the result, to split the task, to outsource it, ...