Most Beginner React Developers Do This Wrong

Рет қаралды 228,694

Күн бұрын

FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
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:
FREE React Hooks Simplified Course: courses.webdevsimplified.com/...
GitHub Code: github.com/WebDevSimplified/r...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ 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

Пікірлер: 278

@KCrossReal Жыл бұрын

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

@wasd3108 Жыл бұрын

top 10 mistakes a clickbaiter makes when viewer fkin his mom [DO NOT MAKE THIS MISTAKE YOURSELF!]

@p33yush Жыл бұрын

true! small but awesome observation

@parlor3115 Жыл бұрын

But then again, you don't want to have large lists as you'll use server side pagination

@lauralegerofficial Жыл бұрын

@@parlor3115 It depends, really. Sometimes I will use large lists that are generated on the client side.

@theBarracuda_ Жыл бұрын

isn't that redundant with useMemo and depende. array?

@merotuts9819 Жыл бұрын

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 😆

@ayoubdouch6975 Жыл бұрын

Now, your mind and body will never forget how to make a search box for the rest of your time

@yuchuga8341 Жыл бұрын

You can just use react-select library for search input select field. Amazing library

@seventeeen29 Жыл бұрын

You only wasted a day. Those are rookie numbers in this bracket

@Suz4n650 Жыл бұрын

Yeah ! Kyle is a real a hole ! Kidding ofc ! Amazing content !

@lickey8919 5 ай бұрын

...? What lamo

@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

@DiestroCorleone Жыл бұрын

Me too. I was proud of myself, thinking 'I completely dominate forms in React'. But Kyle proved me wrong, and I'm thankful for that. Plus, I learned how to use useRef and useMemo (might have to read more about it to fully understand it), but overall, this was a very useful video.

@techwithtaku Жыл бұрын

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

@developer_hadi Жыл бұрын

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

@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)

@mohammadrafi895 Жыл бұрын

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.

@nabeelahmed7754 Жыл бұрын

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 ♥️

@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

@thilankawijesooriya559 Жыл бұрын

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 ♥

@yuritavares1916 Жыл бұрын

Your communication skills are impeccable. Great video!!

@visionl.3754 Жыл бұрын

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

@dem0niker136 Жыл бұрын

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

@aashish_stanl 5 ай бұрын

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

@venzkie89 Жыл бұрын

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.

@rhnkashyap Жыл бұрын

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

@st1llsane456 Жыл бұрын

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

@RodrigoAlvesdeMacedo 5 ай бұрын

Amazing! I'm learning sooo much with your videos! Thank you!

@thomas-gk9jp Жыл бұрын

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 ?!

@wpxpert98 Жыл бұрын

thank you kyler for this video, it's really helpful

@DiestroCorleone Жыл бұрын

I thought I was good at handling forms until I saw this video. Awsome tips, as usual. Thanks a lot!

@und0 Жыл бұрын

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 then hide them with [data-search*=""] { display: none } Obviously this is an over simplification but works for very large lists

@nguyenduy-sb4ue Жыл бұрын

What ? That is super mess up

@und0 Жыл бұрын

@@nguyenduy-sb4ue Why would it be messed up? It accomplishes the task without super expensive rerenders or DOM manipulation at all. If you have a list of 10,000 nodes removing those from the DOM tree is extremely expensive especially since it blocks the entire thread. Utilizing the browser's much faster css engine would be tens of times faster

@und0 Жыл бұрын

@@agenticmark no shit sherlock, that's the point. Everyone knows React sucks at rendering large arrays that's why we sometimes have to use "hacks". Or tricks to get around its limitations

@peter9759 8 ай бұрын

As always great videos I directly jumped to correct filtering method

@Devanshukoli Жыл бұрын

Hey! Thanks, Kyle I was confused in my react project about adding filtration and this video solved it perfectly... Thanks really .... You mentioned that you have a free react course right? Now I'm gonna check that as well... I learned a lot...Thanks.

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@ahmedelbougha Жыл бұрын

Thank you, Kyle. Great video as usual!

@arielspalter7425 Жыл бұрын

Fantastic tutorials. Thanks!

@curiousLeafy Жыл бұрын

The third way was what i was doing from the beginning of my react learning. I thought this is how people do it because it made sense if a state changes a component rerenders so storing the input value in state makes your component rerender thus storing the filtered value in a regular variables works just fine.

@hilaadin2184 Жыл бұрын

Just what I needed! Thanks!

@aayushgupta8686 Жыл бұрын

Such a simple use case, but still so many wrong techniques to implement a search bar. Thanks for making such videos

@The14Some1 11 ай бұрын

4:30 you can extract input value without using ref either by accessing form elements like this: console.log(e.target.elements.inputElementName), or by extracting formData like this: const data = FormData(event.target); console.log(data.get("inputElementName")); Both require you to assign the name to your input element, though.

@andretura01 Жыл бұрын

Thanks for the video!

@TonyStark90743 Жыл бұрын

Please make videos on node js and express more. We need updated and advanced topics covered in those videos. Thanks 🙏👍🏻

@lickey8919 5 ай бұрын

Like every other turorial out there, this is nice for small projects for learning react or small scale personal websites. Id like to see a server sided pagination with filters tutorial. I think that would be very useful

@bass1387 Ай бұрын

Stuff for beginners)) Perfect result in the end!

@changbogo23 Жыл бұрын

Thank you a lot . Good stuff

@anatolydyatlov963 Жыл бұрын

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!

@kakun7238 Жыл бұрын

@srpatata4172 Жыл бұрын

☝🤓

@anatolydyatlov963 Жыл бұрын

@@srpatata4172 🤓🤘!

@hafizhzulian_ Жыл бұрын

Nice explanation please make a video about edit data in select component

@grantdoyle1259 Жыл бұрын

Hey Kyle could you do a video on the new react update that has changes to async await with promises?

@taylora.buckner5970 Жыл бұрын

I love the amount of effort you put into your videos; thanks for doing so much for the community. My only critique is I've noticed a trend of relatively lengthy videos (>10 min), that probably could be shortened. Take that for what you will, I still love your content. I have a feeling that shorter content will become more popular :)

@kwtr Жыл бұрын

I just finished going through the entire React documentation and this is the best video for me to get started on a new project with React! Thanks Kyle

@parlor3115 Жыл бұрын

Now you'll get to build your dream project sooner

@siriusFish1 Жыл бұрын

@@parlor3115 lol

@instantrecaps1764 Жыл бұрын

Hello, i am a huge fan of yours. Been watching your informative videos for over a year now. And man i have got to tell you that you are awesome. I have a question for you if you can answer : i have got a job recently, it's my very first job. how can i leverage the opportunity so that i can grow? I am learning React now and will work on the frontend

@abdurrahmanm.el-sayed5561 11 ай бұрын

thank you bro, you're awesome!!!!

@Ram-sc6or Жыл бұрын

Helpful, thanks

@alimousavi2763 9 ай бұрын

Best tutorial for search bar thanks❤

@brandonlange2260 Жыл бұрын

Hey Kyle great video as always, you could possibly show how to do this with async data too.

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@m12652 Жыл бұрын

Great stuff… maybe do a comparison between how you do this in React and how you’d do it in Svelte. In svelte, in the markup, you could simply add a condition to a loop that already exists.

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@sayantandas7544 Жыл бұрын

Such a good tutorial!

@jrm_0749 Жыл бұрын

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.

@rolfchristensen9026 Жыл бұрын

Thanks a lot for keeping me from falling into all the pits and stepping on mines :)

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@nwaguchima2280 Жыл бұрын

Thank you so much, Kyle, your contents are always excellent, I have learnt so much and am grateful. I am curious though, instead of using a useMemo, why not just have a use effect that filters the items, with items and queries in the dependency array, I think the question is, which is better? because useMemo sure comes with a cost.

@fabienbroquard7690 Жыл бұрын

useMemo is like a useState with dependencies automaticly triggering it. If you useEffect, you'd need to create a new useState to save the filtered items (if you modify a const of an array set in code it won't work because useEffect runs after the render, it wouldn't render the updated const array).. thus with useEffect/useState, 2 re-renders: one setQuery/setItems changes -> triggers -> useEffect -> triggers -> setFilteredList (which by setting a new state triggers a re-render a second time to display the updated filteredList state). Using useMemo will do the same in only one re-render, because it sets the 'returned state of useMemo' before rendering, not after. useEffect runs after the component has re-rendered.

@osamahussam4351 Жыл бұрын

thanks a lot ! We need another video for node js developers

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@lucienchu9649 Жыл бұрын

Pretty informative, thx

@lescobrandon2202 Жыл бұрын

Good stuff!

@alibinnaseer Жыл бұрын

Do more if these please!

@kakun7238 Жыл бұрын

Really informative video also I have a question is it good to just a const like filteredItems because I have also seen people saying let react handle the state so would it be fine to keep the filteredItems inside a useState Sorry my English is not that good

@noelanthonyrdiaz143 Жыл бұрын

more tutorial pls 😊 well explained ♥️

@user-cy9qi8kj2g Жыл бұрын

One of the fastest lectures I've ever seen

@sambhavjain1104 Жыл бұрын

Hey kyle, can we not directly nest the filter function just before mapping the list, is it a bad approach? I’m doing this since 1 year in my company’s project 😅

@marvelBoy1909 Жыл бұрын

applauds for ur work 👏

@licokr Жыл бұрын

When you used two states filteredItems and items, there was a small mistake that if you added an item, the time would be added anyways regardless of filtering because you didn't filter an item before adding the item into filteredItems... it wasn't the point of this video tho... I just saw it so.. Thank you! I've been really enjoying watching your videos, they've helped a lot!

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@albirtarsha5370 Жыл бұрын

Super content!

@bahibrahim101 Жыл бұрын

Buddy u r the best!

@michaelirwin7258 Жыл бұрын

I've been learning react for about a year now. I've just now gotten my first large scale app 99.9% done. I sure wish I had known about useRef 6 months ago :(

@unpluggedaman Жыл бұрын

Super useful

@user-lz4zo3gc8d Жыл бұрын

базар жок Кайли!Ырзамын гой

@martintopolanek448 Жыл бұрын

Quick tip: You don't need to write return if you wrap function body in parentheses. So instead doing this: filteredItems = items.filter(item => { return item.toLowerCase()... }) You can do this: filteredItems = items.filter(item => (item.toLowerCase()... ))

@ridiculousgames365 Жыл бұрын

You don't even need the parenthesis here because you're returning a single value. This is called implicit return. You would only need parentheses if you were returning an object, for example, items.filter( item => ({ foo: bar }) ).

@martintopolanek448 Жыл бұрын

@@ridiculousgames365 Yeah, you are right.

@mayankjain-901 2 ай бұрын

How is the approach for adding a bool variable like visible to display filtered content or not .

@NikeshKumar-lt5pz Жыл бұрын

Thanks a lot

@lilililliilil Жыл бұрын

GREAT GREAT VIDEO!❤

@shadowmarkds7958 Жыл бұрын

Cool as always

@willyhorizont8672 Жыл бұрын

Correct me if I am wrong. That "items" inside useMemo deps is an array so its render everytime no?

@robertcarsten3127 Жыл бұрын

Because state isn't recreated on each render putting items in a dep array is perfectly fine ( and really the most elegant solution)

@kDev7659 Жыл бұрын

Hi Kyle, do you mentor those who purchase your courses if they have problems or questions? Like a discord group or something? Love the way you take your lessons but I would really love to have some mentoring as well while I learn React. Thanks

@yetissezgin6931 Жыл бұрын

I handle this problem by storing the state of the items in an object in the list. When something is typed, i change the state of the object of the item, it is shown or not.

@PatrikTheDev Жыл бұрын

Have you considered switching to Vite in your future tutorials? CRA is no longer the best way to make very lightweight SPAs. You can look up videos on why that’s the case for most uses

@jamesyanlan2413 Жыл бұрын

I'm a few weeks into react, and I keep seeing youtubers also saying not to use CRA lol. Might have to look into Vite as well. Thanks for the heads up!

@Valyssi Жыл бұрын

It never was the best way to make lightweight SPA's, it was intended as a learning tool and for that it still serves its purpose (though you'd be right to point out that vite is largely just as beginner-friendly as CRA and can easily serve the same purpose, in addition to being production-friendly). That said, it would be nice for him to at least address vite and the problems with using CRA on any project that isn't just for learning.

@ontheruntonowhere Жыл бұрын

His ears must have been burning bc he just released a video about using Vite instead of CRA.

@PatrikTheDev Жыл бұрын

@@ontheruntonowhere that doesn’t mean his ears are burning or smth, he just realized he was wrong and that’s good

@ontheruntonowhere Жыл бұрын

@@PatrikTheDev It's a figure of speech dude. Doesn't mean he was wrong.

@yvysunu Жыл бұрын

This is the first time I have seen this kind of video and realize I do it the right way 😅

@robertolanzone Жыл бұрын

Same lol this was a pleasing confidence boost for once 😂

@tubewell5222 Жыл бұрын

Great Thankyou

@malag6358 Ай бұрын

its very helpful

@mikhailvasilev5798 Жыл бұрын

Nice, but you don’t need a ref. You can take input value from the event in the handle submit.

@jetmartin9501 Жыл бұрын

Great video as usual. Is there any reason you are using an uncontrolled form? Facebook recommends use of controlled forms instead of uncontrolled forms. Just curious?

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@amannan-123 Жыл бұрын

Thanks for this helpful video but I have a habit to burden the server so I pass search params in API request and get searching done on server-side. :)

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@dastaan3468 Жыл бұрын

this is weird,can someone tell me why there are items in filteredItem variable if condition is not matched in filter fn?

@luzaw4957 Жыл бұрын

One mistake I've learned is that I continuously fire API or filters items on input change, so, it's better to add debounce function, wait until the typing is finished and fire API or filter.

@pranshushrivastava20 Жыл бұрын

Can you do one on how to implement remote pagination with react

@keremardicli4013 Жыл бұрын

I hardly can think of use cases for such iten lists. If you do not store them in a database, what good will they do to you?

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@maheshcharyindrakanti8544 Жыл бұрын

ty bruu

@vavinashece5158 3 ай бұрын

Can't understand if query is " " then why in filter items we are getting all data of item.filter it should return [] ?

@yaakovsahale4339 Жыл бұрын

How do filteredItems get filled? The jsx showing the filteredItems and you add only to items without using search even and the page show all the items

@deadeagle-archived Жыл бұрын

The .filter method returns an array; so by filtering on the “query” state it returns an array of all items matching the predicate

@adtc Жыл бұрын

Instead of typing `return` you could just remove the curly braces, since arrow function without curly brace will just return the value automatically. (Of course, when you define an object with curly braces to return automatically, you need to wrap it with parentheses.)

@jotaroisdarius1918 Жыл бұрын

he knows, it's just more readable that way

@tomasburian6550 3 ай бұрын

The big problem here is that you're constantly iterating through an array for each change you make. In the real world, you're getting data from a backend upon request, so it's much more effective to just type your query and then make the request for the data so you only receive what you asked for instead of working with large chunks on FE.

@dannyj7262 Жыл бұрын

Does this also work for when getting data from a DB. I've always made a filter method in my backend code. Then when you type in a search box you call the API filter method and get the returned code. I've always thought this a little crazy, as you could be making several API calls. This way makes perfect sense if your array is already in state in your react app. I've just made an app using redux state management so I presume you can use a similar approach here?

@CottidaeSEA Жыл бұрын

Debounce the input so you don't trigger on every key press and cache the result from API. The cache rules are set by the API server. If no cache headers exist or if it explicitly says not to cache, you can still cache it locally using Redux, sessionStorage or just a JavaScript Map.

@alanhf Жыл бұрын

Very helpful as always... One quick question for anyone who could answer: Is it best practice, mandatory or irrelevant split your "fetch code" from your rendering component?! Thanks!!!

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@davidmartensson273 Жыл бұрын

I would say yes. By separating them you can extend them independently like adding caching, retries or multiple sources without touching the rendering component OR switch rendering or render in more than one place or ... there are so many possible reasons you would want to do it :) And when you do, you also might want to separate out state from the actual display components, but that is a bit more nuanced.

@wazzadev7209 Жыл бұрын

Very nice

@bagery Жыл бұрын

What's the status on your React course update?

@khoinguyen-ft2ys Жыл бұрын

One thing to notice is that, the cost of recalculate filteredItems is not that much, but the cost of re-render filteredItems into the tree is much more bigger

@RandomGuy-jv4vd Жыл бұрын

@@khoinguyen-ft2ys Ahh...the blog post which you cited also addressed the same thing as my link above: "Unnecessary re-renders by themselves are not a problem: React is very fast and usually able to deal with them without users noticing anything" Therefore, most of the time, it's more likely the issue of slow render rather than Unnecessary re-render. Anw, tysm for such an in-depth article, I'm very glad that I learnt something new after all :D

@khoinguyen-ft2ys Жыл бұрын

@@RandomGuy-jv4vd You're welcome

@jwh-e2p 11 ай бұрын

Hi, great video. But do you agree that react is only suitable for (very) senior devs, since there are soooo many code ‘design’ mistakes to make? As a project manager with dev skills, I just don’t dare to start a react project due to this complexity for an enterprise client.

@codenamegrant Жыл бұрын

What are your thoughts on using Vite instead of CRA, I find it so much faster to install and run

@whatsapp176 Жыл бұрын

Helpline 📲📩⬆️ Questions can come in⬆️

@joshjha3700 Жыл бұрын

Hello web dev simplified, can you teach us how to set up and install react fully, in Vs code.

@kursflash Жыл бұрын

How to use useRef() in TypeScript with current.value?

@CottidaeSEA Жыл бұрын

The inputRef is also unnecessary. If you name the form inputs you'll be able to access them straight through the event.target, which will be our form in the SubmitEvent. For example, if the input is named searchInput, we can access the DOM element by using event.target.searchInput.