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
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 😆
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 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
@@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
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)
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.
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()... ))
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 }) ).
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!
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 ♥
Man, you are a genius programming - Thank you so much for the tutorial. It helped me a lot. a tip for everyone. {query ? setFilteredItems.map((item) => { return ("your components and etc") : null } It will display the list only when the user starts typing.
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.
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 ♥️
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.
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
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.
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 ?!
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.
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.
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!
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
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.
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
@@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
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.
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.
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 :(
Nice video, another way it can be to add a property to your element, like return [...prev,{"item":value,"isFiltered":false}], so you don't even need to declare filteredItems
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.
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.)
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
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.
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.
My question is, with the final solution you are looping over the items array once and the filteredItems array once as well. Why not just do the filtering directly in the render? useState forces the component to render when the value changes, so if you do {items.map( (item) => (!!query ? item.toLowerCase().includes(query) : true) && ( {item} ) )} That way you only loop the array once
Reduce can be harder to read, if the 2 loops become a speed concern, u might wanna think of filtering in the backend anyways and not hold that big lists in your local state.
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 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.
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.
Hey Kyle, Have you ever considered trying a different language/framework? I would love to see some diversity on Django, Ruby, Go or even some other javascript framework like Next. Just curious to know why you haven't tried these.. I think you can make great content and more often getting the learning on a different technology from the same yt channel will only increase your visibility and reach to other people
Next is going to be the same as React. I guess he's targeting the most used tech (React) because he's only one. Also he is JS oriented. The other stacks you're mentioning are not widely used. He might as well do Blazor tutorials before any other non-JS tutos.
Just don't use CRA, even if he does. There's Vite now, it's 2022. CRA made sense bc of the polyfills and bc no one wanted to set up a react env and configure webpack by hand. Now it's just a bloated and buggy piece of sh*t.
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?
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.
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
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 :)
When your state itself depends on derived state of itself, useMemo becomes impossible sooner or later, and you have to refactor all of the things once again.
Still better have a query request to receive the filtered list from a server and not doing it from the front, it can be very costly in terms of performance when the list is long.
Kyle - the NextJS community needs Web Dev Simplified videos. If there was a Kyle type Bat-signal, it would be shining in the sky, right now. Will you answer?
So in this particular situation the function version was used to get the previous value of the items state variable and then a filter was performed in that function. If your new value of a state is being derived from the previous value of that state you should always use the function version to pipe in the value instead of accessing it directly. so do this setCount(prevCount => prevCount + 1) and not this setCount(count + 1) and once he had removed the filtering function to it's own slice of state he no longer needed to access the previous version of the items state inside its own setState function so just using the state variable was fine
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!!!
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.
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 😅
I wouldn't say "create-react-app" is decent. I prefer to use "npm init vite", a lot of packages like `@mui/material` can make problems though, since they're badly built and exported.
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
top 10 mistakes a clickbaiter makes when viewer fkin his mom [DO NOT MAKE THIS MISTAKE YOURSELF!]
true! small but awesome observation
But then again, you don't want to have large lists as you'll use server side pagination
@@parlor3115 It depends, really. Sometimes I will use large lists that are generated on the client side.
isn't that redundant with useMemo and depende. array?
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 😆
Now, your mind and body will never forget how to make a search box for the rest of your time
You can just use react-select library for search input select field. Amazing library
You only wasted a day. Those are rookie numbers in this bracket
Yeah ! Kyle is a real a hole ! Kidding ofc ! Amazing content !
...? What lamo
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
What ? That is super mess up
@@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
@@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
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)
Very helpful! I was actually doing mistake #2 in a recent project, but now I know that I'll have to change that :D
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.
Ever since I started watching this channel, my react skills are improving. thanks man
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()... ))
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 }) ).
@@ridiculousgames365 Yeah, you are right.
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.
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!
Fr
☝🤓
@@srpatata4172 🤓🤘!
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 ♥
Man, you are a genius programming - Thank you so much for the tutorial. It helped me a lot.
a tip for everyone.
{query ? setFilteredItems.map((item) => { return ("your components and etc") : null } It will display the list only when the user starts typing.
After watching WDS tutorials I am able to write React code. Thanks man!!! Very much appreciated.
Thanks brother. I am learning react now. Hoping to see me coding like you soon in few years.
THIS VIDEO CAME IN THE RIGHT TIME, THANK YOU SO MUCH YOU'RE THE SIMPLEST ON UA-cam
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.
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 ♥️
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?
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
Now you'll get to build your dream project sooner
@@parlor3115 lol
Nice, but you don’t need a ref. You can take input value from the event in the handle submit.
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.
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
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.
Such a simple use case, but still so many wrong techniques to implement a search bar. Thanks for making such videos
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 ?!
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.
Please make videos on node js and express more. We need updated and advanced topics covered in those videos. Thanks 🙏👍🏻
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.
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!
Helpline 📲📩⬆️
Questions can come in⬆️
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
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!
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.
His ears must have been burning bc he just released a video about using Vite instead of CRA.
@@ontheruntonowhere that doesn’t mean his ears are burning or smth, he just realized he was wrong and that’s good
@@PatrikTheDev It's a figure of speech dude. Doesn't mean he was wrong.
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
@@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
@@RandomGuy-jv4vd You're welcome
Wow! This was so helpful. Will be using this method from now on. Thanks!
Thank you, I'm doing my first mini-project and it helped me a lot
Your communication skills are impeccable. Great video!!
I thought I was good at handling forms until I saw this video.
Awsome tips, as usual. Thanks a lot!
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.
As always great videos I directly jumped to correct filtering method
Amazing! I'm learning sooo much with your videos! Thank you!
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.
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 :(
Nice explanation please make a video about edit data in select component
Nice video, another way it can be to add a property to your element, like return [...prev,{"item":value,"isFiltered":false}], so you don't even need to declare filteredItems
I am really grateful for all the content, thanks Kyle!
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.
Helpline 📲📩⬆️
Questions can come in⬆️
Thanks a lot for keeping me from falling into all the pits and stepping on mines :)
Helpline 📲📩⬆️
Questions can come in⬆️
Thank you, Kyle. Great video as usual!
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.)
he knows, it's just more readable that way
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
This is the first time I have seen this kind of video and realize I do it the right way 😅
Same lol this was a pleasing confidence boost for once 😂
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.
Helpline 📲📩⬆️
Questions can come in⬆️
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. :)
Helpline 📲📩⬆️
Questions can come in⬆️
Just what I needed! Thanks!
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.
thank you kyler for this video, it's really helpful
My question is, with the final solution you are looping over the items array once and the filteredItems array once as well. Why not just do the filtering directly in the render? useState forces the component to render when the value changes, so if you do
{items.map(
(item) =>
(!!query ? item.toLowerCase().includes(query) : true) && (
{item}
)
)}
That way you only loop the array once
Map is supposed to NOT change the array length. But u could do reduce() here to save one loop - so u could combine filter and map.
Reduce can be harder to read, if the 2 loops become a speed concern, u might wanna think of filtering in the backend anyways and not hold that big lists in your local state.
thanks a lot !
We need another video for node js developers
Helpline 📲📩⬆️
Questions can come in⬆️
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 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.
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.
What are your thoughts on using Vite instead of CRA, I find it so much faster to install and run
Helpline 📲📩⬆️
Questions can come in⬆️
Hey Kyle great video as always, you could possibly show how to do this with async data too.
Helpline 📲📩⬆️
Questions can come in⬆️
Correct me if I am wrong. That "items" inside useMemo deps is an array so its render everytime no?
Because state isn't recreated on each render putting items in a dep array is perfectly fine ( and really the most elegant solution)
One of the fastest lectures I've ever seen
Hey Kyle, Have you ever considered trying a different language/framework? I would love to see some diversity on Django, Ruby, Go or even some other javascript framework like Next. Just curious to know why you haven't tried these.. I think you can make great content and more often getting the learning on a different technology from the same yt channel will only increase your visibility and reach to other people
Next is going to be the same as React. I guess he's targeting the most used tech (React) because he's only one. Also he is JS oriented. The other stacks you're mentioning are not widely used. He might as well do Blazor tutorials before any other non-JS tutos.
learning React rn in school and i learn more from you than them
Just don't use CRA, even if he does. There's Vite now, it's 2022. CRA made sense bc of the polyfills and bc no one wanted to set up a react env and configure webpack by hand. Now it's just a bloated and buggy piece of sh*t.
@@EnriqueDominguezProfile oh cool, thanks! I’ll look into Vite.
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?
Helpline 📲📩⬆️
Questions can come in⬆️
Hey Kyle could you do a video on the new react update that has changes to async await with promises?
Stuff for beginners)) Perfect result in the end!
Do a video how one can also do search from data stored in the backend
Helpline 📲📩⬆️
Questions can come in⬆️
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?
Helpline 📲📩⬆️
Questions can come in⬆️
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.
Helpful, thanks
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
Best tutorial for search bar thanks❤
Using useRef() to get my inputs on submit shows why I may still be a beginner. I use useState during onChange for every input.
Helpline 📲📩⬆️
Questions can come in⬆️
Thankyou
like the one react beta doc example
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 :)
thank you bro, you're awesome!!!!
When your state itself depends on derived state of itself, useMemo becomes impossible sooner or later, and you have to refactor all of the things once again.
Helpline 📲📩⬆️
Questions can come in⬆️
Hi Kyle. Is your Frontend Roadmap up to date? Should I follow it?
Helpline 📲📩⬆️
Questions can come in⬆️
Still better have a query request to receive the filtered list from a server and not doing it from the front, it can be very costly in terms of performance when the list is long.
Helpline 📲📩⬆️
Questions can come in⬆️
applauds for ur work 👏
Fantastic tutorials. Thanks!
Great Thankyou
базар жок Кайли!Ырзамын гой
Kyle - the NextJS community needs Web Dev Simplified videos. If there was a Kyle type Bat-signal, it would be shining in the sky, right now. Will you answer?
Helpline 📲📩⬆️
Questions can come in⬆️
Thanks a lot
Why does he not need the function version anymore at 8:00 ? Why was it needed at all?
So in this particular situation the function version was used to get the previous value of the items state variable and then a filter was performed in that function. If your new value of a state is being derived from the previous value of that state you should always use the function version to pipe in the value instead of accessing it directly.
so do this
setCount(prevCount => prevCount + 1)
and not this
setCount(count + 1)
and once he had removed the filtering function to it's own slice of state he no longer needed to access the previous version of the items state inside its own setState function so just using the state variable was fine
Super content!
Thank you a lot . Good stuff
Can you do one on how to implement remote pagination with react
Thanks for the video!
Cool as always
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!!!
Helpline 📲📩⬆️
Questions can come in⬆️
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.
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 😅
Thanks
Thought using ref like that wasn't right. You're supposed to manage your form fields
I wouldn't say "create-react-app" is decent. I prefer to use "npm init vite", a lot of packages like `@mui/material` can make problems though, since they're badly built and exported.
Helpline 📲📩⬆️
Questions can come in⬆️
Great! but about guitar shredding solo lessons?
Helpline 📲📩⬆️
Questions can come in⬆️
its very helpful
Good stuff!