When an API returns over 10,000 objects in the format of {firstName:'john',lastName:'Cena'}, I am faced with a performance issue. In my parent React component, I make the API call in componentDidMount and pass this object to child components.
However, when users start typing in the child component, there is noticeable lag. I attempted to resolve this by using the callback method, but the issue persists.
Parent Component
const Filters = ({validation}: any) => {
const [EmployeeList, setEmployeeList] = useState<any[]>([]);
useEffect(() => {
//get and set
},[])
return (
<>
<Staff EmployeeList={EmployeeList}/>
</>
)
}
Child Components
const onChange = useCallback(
(e: any) => {
const userInput = e.currentTarget.value
if(staffList){
setFilteredSuggestions(staffList.filter(
staff =>
staff.firstName.toLowerCase().indexOf(userInput.toLowerCase()) > -1
))
}
setUserInput(e.currentTarget.value)
},
[userInput]
)