How to avoid expensive re-calculations

React has a built-in hook called useMemo that allows you to memoize expensive functions so that you can avoid calling them on every render.

Memoization is an optimization strategy that returns cached values from functions that have previously been invoked with the same arguments. In other words, instead of recalculating its return value, the function will return a cached value. This is useful when you have functions doing memory intensive operations and want to minimize how often they're invoked.

 const allItems = getItems(inputValue)

change to

const allItems = React.useMemo(() => getItems(inputValue), [inputValue])