We have some users in v1 with 1000 ~ 2,500 users so loading them at the beginning can be heavy. I think we could only load this when the user start to type in the search box + debouce(to avoid extra loads during typing). What do you think?

@BrunoQuaresma good point! Your solution sounds right. So we can get this out there (@kylecarbs wants to use it) how about we do something like:

  useEffect(() => {
    if (value) {
      sendSearch("SEARCH", { query: value.email })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

for now?

Sounds good!

This is already done in the handleFilterChange. I don't think we need the useEffect here 🤔

Hmm, this is what I'm trying to solve with this useEffect:

Is there a better way?

Ahhh I see. So when you clear the input, you want to clear the results as well right? If it is, I would add a new event to the search machine called CLEAR_RESULTS that sets the results to undefined and do this logic in the onChange handler like:

....
// This happens when the user clears the results with the "x" button
if(option === null) {
    send("CLEAR_RESULTS")
}

Unfortunately, the MUI Autocomplete does not have an onClear 😔 that would be a better place. I like to put logic on event handlers because I think they are better to follow when they are called than useEffect but it is up to you. If you think this is not necessary feel free to merge it.

That worked well! Thanks!