paint-brush
Filtering And Processing Data With useFilter Hook In Reactby@lakhansamani
1,613 reads
1,613 reads

Filtering And Processing Data With useFilter Hook In React

by Lakhan SamaniMay 17th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

With useFilter hook you don't need to write the filter/search logic. Using Web Worker we can leverage the use of Web Worker which runs on a separate thread and can share the messages with main thread. We recommend using react-window for rendering large data set. Also use use useDebounce hook with search so that with every hit a search query is not triggered. Use filter and search data using webworker to filter large data table in frontend. When to use use filter, use filter to search large list or filter data table.

People Mentioned

Mention Thumbnail
featured image - Filtering And Processing Data With useFilter Hook In React
Lakhan Samani HackerNoon profile picture

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

  • Yarn
    yarn add @promise_learning/usefilter
  • NPM
    npm install @promise_learning/usefilter

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
    : Required | Array of objects
  • search
    : Optional | Object with following keys:
    query
    -> query string and
    fields
    -> object keys to search on
  • filters
    : Optional | Object with key as a field from object in an array and value could be possible value arrays / string

Data Returned

  • loading
    : boolean stating if web worker is processing the data or not
  • data
    : filtered data

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
🎉

Also published at https://dev.to/lakhansamani/react-usefilter-hook-26c4