use a ref instead of state

We don't want the component to rerender when the search text changes, only when new search results are received from Panoptes.

packages/app-project/src/shared/components/CollectionsModal/components/SelectCollection/SelectCollection.js

@@ -2,7 +2,7 @@ import { Box, Button, FormField, Grid, Select } from 'grommet'
 import { observer } from 'mobx-react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'next-i18next'
-import { useState } from 'react'
+import { useRef } from 'react'
 
 /*
   Tune this value to determine when a search term
@@ -19,7 +19,7 @@ function SelectCollection ({
   selected = {},
   userID = ''
 }) {
-  const [searchText, setSearchText] = useState('')
+  const searchText = useRef('')
   const { t } = useTranslation('components')
 
   const dropProps = {
@@ -31,19 +31,19 @@ function SelectCollection ({
   For shorter strings, we request all your collections then filter the display names.
   */
 
-  async function onTextChange(text) {
+  function onTextChange(text) {
     const search = text.trim()
-    await onSearch({
+    onSearch({
       favorite: false,
       current_user_roles: 'owner,collaborator,contributor',
       search: search.length > MIN_SEARCH_LENGTH ? search : undefined
     })
-    setSearchText(search)
+    searchText.current = search
   }
 
   function collectionNameFilter(collection) {
     const displayNameLowerCase = collection.display_name.toLowerCase()
-    return displayNameLowerCase.includes(searchText.toLowerCase())
+    return displayNameLowerCase.includes(searchText.current.toLowerCase())
   }
 
   function collectionLabel(collection) {
@@ -56,7 +56,7 @@ function SelectCollection ({
   /*
     If the search text is long enough, use fuzzy full-text search. Otherwise, filter collections by display name.
   */
-  const options = searchText.length > MIN_SEARCH_LENGTH
+  const options = searchText.current.length > MIN_SEARCH_LENGTH
     ? collections
     : collections.filter(collectionNameFilter)