There are times when we need to process and filter data in frontend. Writing the search and filter logic can be an overhead and repeating task. With the help of useFilter hook you don't need to write the filter/search logic.
Also, while dealing with large amount of data, it often takes up lot memory and keeps the main thread block till the filtering process is completed. This results into bad user experience. In order to keep the main thread free and run the web application without any glitches we can leverage the use of Web Worker which runs on a separate thread and can share the messages with main thread.
I, along with my friend Yash Joshi developed a react hook 
useFilter
 that lets you filter and search data using webworker.

Live Demo

How to use?

Installation
Usage
We recommend using 
react-window
 for rendering large data set. Also use 
useDebounce
 hook with search so that with every hit a search query is not triggered.
import { useFilter } from '@promise_learning/usefilter';

import from './data.json';

// handle this using the state in your app

const searchData = {
    query: '',
    fields: ['name'],
};

const filtersData = {
    category: ['Sci Fiction'],
};

export const App = () => {
  const { loading, data: result } = useFilter({ data, search: searchData, filters: filterData });

  if (loading) {
    return <div>loading..</div>
  }

  return (
    <>
      // render result
    </>
  ) 
   
}

Parameter Object

Data Returned

When to use?

Enjoy using 
@promise_learning/usefilter
and shower some love to 
github repo
 🎉
Also published at https://dev.to/lakhansamani/react-usefilter-hook-26c4