React useFilter Hook
Tags: react, hook, webworker, filter
Published: 2021-05-01 13:19:05

---
published: true
title: React useFilter Hook
description: A React hook to filter large amount of data using  Web Worker.
tags: react, hook, webworker, filter
---

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`](https://github.com/promise-learning/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 blocked 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](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) which runs on a separate thread and can share the messages with main thread.

I, along with my friend [Yash Joshi](https://twitter.com/jyash97) developed a react hook [`useFilter`](https://github.com/promise-learning/useFilter) that lets you filter and search data using webworker.

## Live Demo

{% codesandbox usefilter-demo-comlink-mdfz8 %}

## How to use?

### Installation

- Yarn `yarn add @promise_learning/usefilter`
- NPM `npm install @promise_learning/usefilter`

### Usage

> We recommend using [react-window](https://www.npmjs.com/package/react-window) for rendering large data set. Also use [`useDebounce`](https://www.npmjs.com/package/use-debounce) hook with search so that with every hit a search query is not triggered.

```jsx

  import { useFilter } from '@promise_learning/usefilter';
  import from './data.json';


  /////////////////////////////////////////
  // handle this using the state in ur 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
      </>
    )
  }
```

## Parameters

| Parameter | Type                                                                                                         | Required |
| --------- | ------------------------------------------------------------------------------------------------------------ | -------- |
| data      | Array                                                                                                        | `true`   |
| search    | Object -> `{query: '', fields: []}`. `query` is the search term and `fields` is the object keys to search on | `false`  |
| filters   | Object -> Key Value Pair. Where `key` is a field from object in array and value could be possible value      | `false`  |

## Data Returned

Object with following data is returned by the `useFilter` hook.

| Key     | Values           | Description                          |
| ------- | ---------------- | ------------------------------------ |
| loading | `true` / `false` | Worker processing state              |
| data    | Array            | filtered response based on the input |

## When to use?

- Filter / Search large list in frontend
- Filter / Search large data table in frontend

Enjoy using `@promise_learning/usefilter` and shower some love to [github repo](https://github.com/promise-learning/useFilter) 🎉