Simple Select with sliced options

select.tsx

import React, { useEffect, useRef, useState } from 'react'
import SelectAtom from 'react-select'

export const Select = (props) => {
    const {
      options,
      onInputChange,
      noOptionsMessage,
    } = props

    const [filteredOptions, setFilteredOptions] = useState(sliceOptions(options))

    const optionsLength = options?.length || 0
    const isOptionsOverLimit = optionsLength >= OPTIONS_LIMIT
    const placeholderContent = isOptionsOverLimit ? 'Digite para pesquisar' : placeholder

    useEffect(() => {
      setFilteredOptions(sliceOptions(options))
    }, [options])

    const onInputChangeFilterOptions = (newValue: string, actionMeta: InputActionMeta) => {
      if (isOptionsOverLimit) {
        if (newValue === '') setFilteredOptions(sliceOptions(options))
        if (Array.isArray(options)) {
          const auxOptions = options.filter((option) => filterOption(option, newValue))
          setFilteredOptions(sliceOptions(auxOptions))
        }
      }
      if (onInputChange) onInputChange(newValue, actionMeta)
    }

    return (
        <SelectAtom
            onInputChange={onInputChangeFilterOptions}
            filterOption={isOptionsOverLimit ? filterOption : undefined}
            options={filteredOptions}
            {...props}
        />
    )
  },
)

export const OPTIONS_LIMIT = 1600

export const sliceOptions = (options) => (options?.slice(0, OPTIONS_LIMIT) || [])

export const filterOption = (option, newValue) => {
  if (!newValue) return true
  return option.label.toLowerCase().includes(newValue.toLowerCase())
}