React native app breaks when filtering through more than 500 items in array-CodePudding

I got a larger array of about 1500 objects that I have to filter based on search input, but the app breaks as soon as there's more than 500-ish items in the array

  const filteredOptions = options.filter((option) => {
    return option.name.toLowerCase().includes(searchValue.toLowerCase());
  });

The error i get is option.name.toLowerCase() is not a function, but if i slice the array to about 400 items it works just normal

This is how i use the filtered options

         <ScrollView>
          {filteredOptions.map((option, index) => {
            return (
              <View
                key={index}
                style={{
                  backgroundColor: "#ddd",
                  paddingVertical: 15,
                  marginTop: 10,
                  paddingHorizontal: 10,
                  borderRadius: 8,
                }}
              >
                <TouchableOpacity onPress={() => handleSelection(option)}>
                  <Text>{option.name}</Text>
                </TouchableOpacity>
              </View>
            );
          })}
        </ScrollView>

And this is how I handle search input

     <TextInput
          style={{
            borderWidth: 1,
            fontSize: 20,
            paddingVertical: 7,
            paddingHorizontal: 4,
            borderRadius: 12,
            marginBottom: 30,
          }}
          value={searchValue}
          onChangeText={(text) => setSearchValue(text)}
          placeholder={"Trazi"}
          placeholderTextColor={"#000"}
     />

If I try to just map the options without slicing and filtering them I get the error maximum call stack size excedeed dep

CodePudding user response：

First, you need to add a null check:

const filteredOptions = options.filter((option) => {
    if (option && option.name && searchValue) {
      return option.name.toLowerCase().includes(searchValue.toLowerCase());
    }
});

Second, due to performance problems, it is better to use FlatList for this big list of items. How to optimize FlatList - https://reactnative.dev/docs/0.69/optimizing-flatlist-configuration