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 hook you don't need to write the filter/search logic. useFilter 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 which runs on a separate thread and can share the messages with main thread. Web Worker I, along with my friend developed a react hook that lets you filter and search data using webworker. Yash Joshi useFilter Live Demo How to use? Installation Yarn yarn add @promise_learning/usefilter NPM npm install @promise_learning/usefilter Usage We recommend using for rendering large data set. Also use hook with search so that with every hit a search query is not triggered. react-window useDebounce { useFilter } ; ; searchData = { : , : [ ],
}; filtersData = { : [ ],
}; App = { { loading, : result } = useFilter({ data, : searchData, : filterData }); (loading) { } ( import from '@promise_learning/usefilter' import from './data.json' // handle this using the state in your app const query '' fields 'name' const category 'Sci Fiction' export const => () const data search filters if return loading.. < > div </ > div return // render result ) 
   
} <> </> Parameter Object : Required | Array of objects data : Optional | Object with following keys: -> query string and -> object keys to search on search query fields : Optional | Object with key as a field from object in an array and value could be possible value arrays / string filters Data Returned : boolean stating if web worker is processing the data or not loading : filtered data data When to use? Filter / Search large list in frontend Filter / Search large data table in frontend Enjoy using and shower some love to 🎉 @promise_learning/usefilter github repo Also published at https://dev.to/lakhansamani/react-usefilter-hook-26c4

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Filtering And Processing Data With useFilter Hook In React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

369 Stories To Learn About Database

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

369 Stories To Learn About Database

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps