Most Beginner React Developers Do This Wrong

As always great videos I directly jumped to correct filtering method

Best tutorial for search bar thanks❤

I love your video, but I am struggling to add debouncing of the filter ? (using the debounce hook of your courses).

I see no other way than using useState for filteredProduct, or maybe there is away to use the custom hook useDebouce with useMemo ???

edit : by using your custom hook usedebounce, i mean, create another one but for useMemo xD not using useefecct behind lol

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.

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

no way you just called me naive and bad code writter :c but I learn something, so we cool

Great Thankyou

Just what I needed! Thanks!

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

Helpful, thanks

Do more if these please!

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.

the source code is not clear to see

Another bug with the second naive approach is that if you add a new item, because you're calling "setFilteredItems", the new item will be added to your list even if you have a search term that filters it out. So if your search bar had "on", but you added "three", your list would become "one, three" until you modified the search query again, at which point it would get filtered out correctly.

you fool what are you doing

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.

I like your videos, but the clickbait titles into 10 minutes of setup before we actually hear what the topic is is kind of irritating.

Caching was happening because you forgot to add the key in map element render.

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 ♥

Why do we need a state for query, wouldn't it be simpler to just do the filtering in the onChange event and just grab the value there?

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

Why use state for query when you can useRef() ?

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

"Most Beginner React Developers Do This Wrong"
Using cra to start a project...

You could've used useCallback() here instead of useMemo()

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

Hello I was wondering would you please share your settings.json file with us please

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.

Please stop teaching people to use create-react-app. It is a terrible boilerplate. Vite is where it's at.

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

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

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

Super content!

like the one react beta doc example

Currently learning React, so apologies if there's something I'm not catching about how useMemo works, but wouldn't this end up using much more memory than just "duplicating" the state, especially if it fires off for every letter typed? Isn't this just hiding that under an abstraction effectively making it harder to reason about if there ever is an issue?

Thank you, Kyle. Great video as usual!

Cool as always

Your communication skills are impeccable. Great video!!

why did you add and use a ref in onSubmit instead of just using e?
e.currentTarget.value will do the same thing without a ref..

Use memo is useless in this example.

You do not need ref to get value from Input. e.target.value is enough. And never set value ref.current.value. You should just say setValue(‘’) as it is controlled input.

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

why not use CSS?

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

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

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

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