ReactJS useMemo inside function

Question

I have this function:

const handleSearch = (event) => {
  const currentValue = event?.target?.value;
  const filteredData = searchTable(currentValue, originalData);
  setDataToTable(filteredData);
};

I tried to use useMemo() to memoize the value of filteredData in order to not perform the function searchTable because it's slow. I tried this inside the handleSearch function:

const filteredData = useMemo(() => searchTable(currentValue, originalData), [currentValue]);

But I get the Hooks can only be called inside of the body of a function component message which is correct.

How should I use useMemo for my case?

Answer 1

You must store the search query into a state variable and use useMemo with this variable to compute the filtered data.

function App() {
  const [query, setQuery] = useState();
  const filteredData = useMemo(() => searchTable(query, originalData), [query]);
  
  function handleSearch(event) {
    setQuery(event?.target?.value);
  }

  return (...)
}