Most Beginner React Developers Do This Wrong

Filtering is one of the most common things you will do as a developer, but it is something most developers do wrong in React. In this video I want to showcase some of these incorrect approaches as well as show you the correct way to create a search filter in React.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:30 - Setup
01:55 - Basic State Setup
05:35 - Naïve Filtering Approach #1
07:35 - Naïve Filtering Approach #2
09:41 - Correct Filtering Approach

#React #WDS #ReactSearchFilter

[kevincrossgrove]

One small thing I'd add to the top of the useMemo -> if (!query) return items

So you don't iterate over the whole list of items if there is no query

Important for large lists, and also use debouncing in large lists

[merotuts]

Just wasted my whole day yesterday developing a complex people search box at my job. Had to learn all this the hard way 😅 If only you'd posted this a bit sooner 😆

[PROJECTJMUSIC]

Very helpful! I was actually doing mistake #2 in a recent project, but now I know that I'll have to change that :D

[Valyssi]

Key takeaway (which is also stressed in the react docs): don't duplicate state. It is extremely rare for state needing to be duplicated (ie. the same data appearing in different states, or multiple times within the same state). The memoization is a nice addition and good to be aware of, but the docs recommend against preemptive optimizations. If you do optimise, you should keep in mind the memory footprint of that memo and most importantly whether the memo tends to be used (versus a component whose primary state changes involve changing one of the dependencies of the memo)

[techwithtaku]

Ever since I started watching this channel, my react skills are improving. thanks man

[mohammadrafi]

Thanks for explaining that. I saw the correct way a couple of times but didn't really understand why we need to do it that way.

[developer_hadi]

THIS VIDEO CAME IN THE RIGHT TIME, THANK YOU SO MUCH YOU'RE THE SIMPLEST ON YOUTUBE

[nabeelahmed]

Super useful.... I was just working on the filters last day.... And i used the first approach.... And now you taught me the correct method.... Thanks buddy ♥️

[und]

This is a sort of hack but for this specific situation the best way is actually to hide the items using css attribute selectors :P

<li data-search="one" />
<li data-search="two" />
<li data-search="three" />

then hide them with { display: none }</style>

Obviously this is an over simplification but works for very large lists

[anatolydyatlov]

I don't know why, but almost every time I watch your "most people do it wrong" videos, I realise that I've been doing the given thing correctly despite the fact that I've learned React on my own through experimentation. Nevertheless, I love watching them just to confirm that there's no better approach. Great work, man, keep it up!

[thomas-gkjp]

Thank you, explanations are really good !
Maybe you could explain a bit more the custom hooks / useEffect concept, which is not the easiest to understand ?!

[thilankawijesooriya]

I'd been using the useState hook to update the "filteredItems" array also..The way I used to do this was updating the state of "filteredItems" array within a useEffect(updates the filteredItems array when the query changes)..But with this method you manipulate the data inside the filteredItems array nicer than my method and It saves a rerender..Thank you for the demonstration ♥

[rhnkashyap]

After watching WDS tutorials I am able to write React code. Thanks man!!! Very much appreciated.

[venzkie]

I've learned a lot from this guy since I subscribed from this channel. I always looked back from his video list whenever I got stuck from coding. Thank you man.

[kellecierion]

A very good video. I love your content, they are simple and easy to understand. I love those contents were it's explained why it is not correct or vice-versa. Best regards

[stllsane]

Thank you, I'm doing my first mini-project and it helped me a lot

[jrm_]

Nice video mpan, but to me, it's still not the most efficient way to do it because you're still storing the filtered array. Instead, you can just filter the items array directly in the render() right after the map function. Tell me if I'm missing something.

[aashish_stanl]

Thanks brother. I am learning react now. Hoping to see me coding like you soon in few years.

[demniker]

Wow! This was so helpful. Will be using this method from now on. Thanks!

[visionl.]

I am really grateful for all the content, thanks Kyle!