How to handle expensive functions in React - reactjs

Question

I have a component in my application that handles two somewhat expensive functions, but not always at the same time. In one application I have a globe that uses window.requestAnimationFrame() to update the rotation on every request and spin. This runs smoothly when I'm interacting with the other parts of component.
The problem arises when the user interacts with a search, that filters an array of objects.
When I'm typing the globe spin animation runs smoothly, once the getItems() function is called it stutters/stops until the getItems() function is done.
The Map component and the Search component are seperate but are both rendered by a higher component. When the user is typing in the search, there is no reason for the higher component to rerender, and thus the map component does not rerender. This suggests that the problem is the expensive function that hinders the application as a whole.
The item list is defined when the component mounts in an UseEffect hook. The json file that holds the objects lives in the public folder, and is about 30MB. When the users searches, it runs the getItems() functions. I already have a setTimeout on the inputValueChange so it only runs once the user is presumable done typing. Here is the code in question.
import { useEffect, useState, useRef, useCallback, CSSProperties } from 'react'
import { useVirtual } from 'react-virtual'
import { useCombobox, UseComboboxStateChange } from 'downshift'
import { v4 as uuid } from 'uuid';
import { Hint } from 'react-autocomplete-hint';
import MarkerObject from '../../../interfaces/MarkerObjectInterface';
interface Props {
items: Array<MarkerObject>;
onSelect(item: MarkerObject): void;
onHoverEnter: (item: MarkerObject) => void;
onHoverLeave: () => void;
}
const Search = (props: Props) => {
//Initialize the state and refs
const [inputValue, setInputValue] = useState('')
const [items, setItems] = useState<MarkerObject[]>([])
const listRef = useRef<HTMLElement>(null)
//Waits for the user to stop typing for half a second before updating the list of items
//This helps a lot with an unnecescary rerender of the somewhat expensive getItems function
useEffect(() => {
const delayInput = setTimeout(() => {
setItems(getItems(inputValue))
}, 500);
return () => clearTimeout(delayInput);
}, [inputValue])
//Listens for a selected item, then passes that item back to TestMaped Item: ", selectedItem)
const handleSelectedItemChange = (changes: UseComboboxStateChange<any>) => {
props.onSelect(changes.selectedItem)
// props.onHoverLeave(changes.selectItem)
}
//Filters the items based on seach query
function getItems(search: string) {
if (search.length === 0)
return []
return props.items.filter((n) => {
if (n.type === "city") {
const citystatecountry = (n.name + ", " + n.state_name + ", " + n.country_name).toLowerCase()
const citystatecodecountry = (n.name + ", " + n.state_code + ", " + n.country_name).toLowerCase()
const citystatecodecountrycode = (n.name + ", " + n.state_code + ", " + n.country_code).toLowerCase()
const citystate = (n.name + ", " + n.state_name).toLowerCase()
const citystatecode = (n.name + ", " + n.state_code).toLowerCase()
const citycountry = (n.name + ", " + n.country_name).toLowerCase()
const citycountrycode = (n.name + ", " + n.country_code).toLowerCase()
const city = n.name.toLowerCase()
if (citystatecountry.startsWith(search.toLowerCase()))
return true
else if (citystate.startsWith(search.toLowerCase()))
return true
else if (citycountry.startsWith(search.toLowerCase()))
return true
else if (city.startsWith(search.toLowerCase()))
return true
else if (citystatecodecountry.startsWith(search.toLowerCase()))
return true
else if (citystatecodecountrycode.startsWith(search.toLowerCase()))
return true
else if (citystatecode.startsWith(search.toLowerCase()))
return true
else if (citycountrycode.startsWith(search.toLowerCase()))
return true
}
else if (n.type === "state") {
const state = (n.name).toLowerCase()
const statecountry = (n.name + ", " + n.country_name).toLowerCase()
if (state.startsWith(search.toLowerCase()))
return true
else if (statecountry.startsWith(search.toLowerCase()))
return true
}
else {
const country = (n.name).toLowerCase()
if (country.startsWith(search.toLowerCase()))
return true
}
return false
})
}
//Initialies the itemToString funciton to be passed to useCombobox
const itemToString = (item: MarkerObject | null) => (item ? item.display_text : '')
//Initializes the rowVirtualizer using a fixed size function
const rowVirtualizer = useVirtual({
size: items.length,
parentRef: listRef,
estimateSize: useCallback(() => 30, []),
overscan: 1,
})
const {
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
highlightedIndex,
selectedItem,
getComboboxProps,
isOpen,
selectItem
} = useCombobox({
items,
itemToString,
inputValue,
onSelectedItemChange: (changes) => handleSelectedItemChange(changes),
onInputValueChange: (d) => {
console.log(d.inputValue)
if (d.inputValue || d.inputValue === "")
setInputValue(d.inputValue)
},
scrollIntoView: () => { },
onHighlightedIndexChange: ({ highlightedIndex }) => {
if (highlightedIndex)
rowVirtualizer.scrollToIndex(highlightedIndex)
},
})
return (
<div className="" onMouseLeave={() => props.onHoverLeave()}>
<div className="">
<label {...getLabelProps()}>Choose an element:</label>
<div {...getComboboxProps()}>
<input
className={inputCss}
{...getInputProps(
{
type: 'text',
placeholder: 'Enter Place',
})}
/>
</div>
</div>
<ul className="-webkit-scrollbar-track:purple-500"
{...getMenuProps({
ref: listRef,
style: menuStyles,
})}
>
{isOpen && (
<>
<li key="total-size" style={{ height: rowVirtualizer.totalSize }} />
{rowVirtualizer.virtualItems.map((virtualRow) => (
<li
key={uuid()}
{...getItemProps({
index: virtualRow.index,
item: items[virtualRow.index],
style: {
backgroundColor:
highlightedIndex === virtualRow.index
? 'lightgray'
: 'inherit',
fontWeight:
selectedItem &&
selectedItem.id === items[virtualRow.index].id
? 'bold'
: 'normal',
position: 'absolute',
fontSize: '1.2em',
top: 0,
left: 0,
width: '100%',
height: virtualRow.size,
transform: `translateY(${virtualRow.start}px)`,
},
})}
onMouseEnter={() => props.onHoverEnter(items[virtualRow.index])}
onMouseLeave={() => props.onHoverLeave()}
onMouseOut={() => props.onHoverLeave()}
>
{items[virtualRow.index].display_text}
</li>
))}
</>
)}
</ul>
</div>
)
}
export default Search
I'm also using react-virtual with downshift (example https://www.downshift-js.com/use-combobox#virtualizing-items-with-react-virtual). This definitely improves performance when interacting with the dropdown box as there is virtually no stutter on the animation.
I'm curious about what my options are here. I'm also using firestore with my application. Is there way to allocate memory or limit the memory used by this function or component? Is there a better algorithm or function I should be using in place of .filter()? Should I even have that large of a file in the public folder?
Or should I put the whole json object in a firestore collection? Because its 30MBs and I would want to query across the document, I would have to separate the data into documents. This seems like it would add a huge amount of document reads. Any help or suggestions would be greatly appreciated!