Custom Filter Component in React (Best Practices)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how to create a custom filter component in React. This component will be able to filter a list of products by their name, category, and price, and will follow all of the React best practices and design patterns that exist. It is a great way to learn!

[davronmaxmudov]

We are learning best practices and becoming a senior developer) Thank you so much 😊

[aghileslounis]

The approach is pretty good.
But in this particular case i would do it differently.
A better way imo would be to use the URL to store the state of the filters and have your filter component completely independent with 0 props. Also you can throw inside of it if it is used on a URL that is not meant to be used with product filter.

[almogher]

Great video!
The filters are saved in 2 states that update with an extra useState. Instead, I think it would be better to give the filter component both the state and the onChange as props, thus removing the extra state and the extra useEffect.

[tiagomilitao]

You are an incredible teacher! Thank you very much for all the time and effort you put into making these videos!

[TechSpot]

Very helpful, keep it up with these type of videos.

[mehrdadarman]

Great video and awesome content but for more code refactoring .
it would be great to change filter properties to only one object instead of seperate each of them to usestate hook we can do this in only one state and it helps us to add another property easily in future 🙂

Thank so much for your great content keep going like this 🔥

[KrelleTG]

@15:03 - I don't understand how the search from the filter-components gets sent to the App.tsx.
In my head, we would need to pass the "search" state from App.tsx to the filter--component in order to access it.
Does the concept youre doing have a name, so i can read into it?

[regilearn]

Hi mate, appreciate for the wonderful content, please teach us how to do pagination best practice using an example.

[sabafarzan]

Hi thanks for the best content that you have created please develope a big project from zero ❤

[MsVsmaster]

I would do differently, using url as state for the filter, and pass them to the query key, in queryFn argument you have access to the query key, making it possible to read the first and second index containing the url state.

[koolam]

sir, that's really good content.
Could you advise the best practices if there will be many filter parameters like 10 to 15, not like the 3 as this example

[marioigkiempor]

Very clear video, thank you.

Could it be better to keep the state variables in the parent (App) component and pass the setters to the filters? That way you are not duplicating the state and you wouldn’t need the useEffect?

[juanmagomezomil]

Is it better use queryParams to manage the filters and search??

[candyman]

I noticed the useQuery is not inside useEffect. Does that mean anything change in the search value, the useQuery will be called?

[pratikbhagwat]

hey really great video and btw whats the name of your theme?

[ahmedhassan_saver]

I think u should do another vid that enhance this to use search params

[adarshchhokar]

in your search, what if the category or maxprice is null, then wouldn't setSearch give an error?

[kalideb-yy]

is adding hooks (like useState) in our useDebounce necessary?

[mohdali-yqgq]

It is a great example of customer filter but we would like to request you to achieve the same filter by using url to store the state of the filters and please post your next video to achieve the same by using url

[abrahamibizugbe]

Your discord link doesn't work, same with project-react link😢

Are these links location dependent?