If there's anything that I said that was wrong, let me know! I recorded and edited this in about 4 hours last night so there's prone to be some errors haha, but I hope you enjoy the video!!! Be sure to subscribe so that you get notified when new videos come out :)!
One thing: The abortcontroller should probably be in the effect not in the component body. It doesn't really matter, but it would let effects re-run outside of render.
The query text shouldn’t be saved as a state as it causes unnecessary rerendering, you can just register to a onChange event on the text field. Not to be harsh but I would actually not hire someone that uses setQuery here, it’s a common trap
I think one issue that did come up with the abort controller is that: whenever I deleted the text in the input, the app would crash and display "Error, Cancel Request". What could be causing that?
Your video is actually really really good! At first I thought "oh this is basic stuff, nothing new here..." But then you added layers of complexity which were explained in a simple an informative way! Way to go! Id become a big fan and a regular atyour channel if you keep uploading this type of videos! Your content is awesome!
This video shows more advanced cases and more advanced information. Though i am not using React, i will rewatch and will implent ideas. This is golden informatioon. Thank you!
Nice job! I interview folks all the time and I rarely get this much detail. The only extra bonus points I would have like to have seen would have been touching on alternative options like filtering from a stream or using a library like react query. But, I still would have hired you 😂. To all the newbs out there, lots of folks don’t know this much and still get hired to entry level positions. Thanks for the video.
Oh that's great to hear from someone that does interviews! Thank you so much I feel better :). I always get stressed out when hearing about coding interviews being a mess etc..
fantastic job going over this. I had to build a very complex version of this for work and it can totally be challenging when asked to do it on the spot. Thanks for covering this, subbed.
Really interesting watch, most tutorials don't cover production ready code, which I think was a great addition. Definitely got some tips from this, although I'm a solo dev on a pretty huge MVP product so my definition of production ready is a little different to yours atm 😂
One small note: In these tests it's often a good idea to also write down how you can further improve the code. For example, since you've nailed down the data fetching abstraction you might want to break it further down into a generic fetching hook, which ultimately leads you to libraries like react-query. It shows you have an in-depth knowledge of how it works, but also understand that these patterns are encapsulated nicely in libraries, if you choose to go that route.
Thanks for this exercise! That's real fun :) To be honest this is something I did several times by the past, so it's very interesting to see somebody doing it his way!
About the query.length => years ago I found a very good way to improve this way better. 1. setInterval on input (like 1000ms), 2. loader on UI while there's no response, 3. if new input, clear interval, repeat :) 4. no new input, loader disappear, data appears 2 effects there. The first is: comfortable for users. The second: never spam your API.
Just found your channel through this video and I love it! Your explanations were so clear and understandable and this was such a relaxing yet interesting video. New sub!!
Only just found you, this was an interesting little video, some great layers going in to solve the problem. I've edited this comment because you answered the question toward the end of the video!
Great video! My opinion regarding caching results for less loading time: In your case, where you have simple data that doesn't change that much, it's okay to cache results but if you have data that changes all the time, you would need to fetch data for each request. Otherwise customers will be quick to say "why aren't we seeing fresh results?"
im new to react and have only made one application with it, but you explained everything so well and were so easy to follow. gonna check out more of your videos !
To be honest, I have replayed this video so many many times, just to go through this custom hook example again and again. There must be more potential of it besides debouncing, it is fascinating..., thank you so much 🙂
funny i just had this task as a preparation for a technical interview. whats wonky is seeing this done in react and the suffocation created by useState and useEffect. i did this in vue and computed properties. in addition highlighting the query string in the results. great video though, like the calm and collected way you presented this.
No, but this was amazing to watch and I think I learned a lot. But I definitely dont understand Javascript nearly enough to do any of this haha. I subbed though, you are a fantastic explainer, I normally struggle with these types of videos.
Don’t worry! It takes time to understand this haha, I remember taking a whole week as an intern trying to debounce some search 😅. But thank yo uso much!!
With RxJs debounce is built in, plus Angular would reduce the code in half. Definatly cool to see the native version/react way of doing it. But I'm glad I never jumped on the react hype train.
I'm working on a project currently my position is intern and I've to use denounce ( i knew the concept but not able to implement ) Now i can proudly say I can easily implement. Thanks for your great and quality 💕 content. Ps: really love your expressions 🥰
So this is how you implement a feature like this in React. I’ve done this in Vue and Blazor before. Good to know. Any sort of auto-completion should implement debouncing. If you don’t, and you ping my API on every key press, I’m going to throttle your application request limit.
Who said being a frontend developer is EZ ? thank you Mewtru for showing the amount of work to put into a single autocomplete component... It would be cool to learn more "best pratices and programming techniques" to ensure performance. We all know React, Vue or whatever ... but do we know the real engineering behind a production-ready app ? Not sure... Plz teach us more
Cool video. If you're looking for more video ideas I would be interested in videos that go into more detail on some of the topics you mentioned: accessibility in forms, throttling, etc. I like the live coding though. Feels a lot more educational than just talking
you earned a subscriber. I am learning react right now and I am building a project, that takes user input and displays movies based on the input. And this video is helpful to implement this feature. Great explanation.
Hi, thanks for your detailed explanation, would it be possible to upload more interview questions/solutions? Your content are high quality and very detailed. Thanks for the hard work
omg too ez i was at least expecting the results to show as suggestions in a custom panel that opens from the input as a dropdown when searching with a spinner inserted in the input
VSCode didn't get mad at you here, because you don't have eslint or the react plugin for it installed. Vite typically doesn't include all that extra stuff for linting.
I really enjoyed this. I'd definitely love to see more of these interview question type of content. Some really great ideas and solution to the problem too. Good work,
I´m learning React and I get lost in the middle of the video, but I like it. Just a simple question, this could be a techinical test in a junior position interview?
If there's anything that I said that was wrong, let me know! I recorded and edited this in about 4 hours last night so there's prone to be some errors haha, but I hope you enjoy the video!!! Be sure to subscribe so that you get notified when new videos come out :)!
One thing: The abortcontroller should probably be in the effect not in the component body. It doesn't really matter, but it would let effects re-run outside of render.
Would be nice to state the libraries/frameworks in your intro or the description.
The query text shouldn’t be saved as a state as it causes unnecessary rerendering, you can just register to a onChange event on the text field.
Not to be harsh but I would actually not hire someone that uses setQuery here, it’s a common trap
@@SivicIsntFat So your goal when you interview folks is to trap them? Why?
I think one issue that did come up with the abort controller is that: whenever I deleted the text in the input, the app would crash and display "Error, Cancel Request". What could be causing that?
Saw this video a while ago, and completely forgot the video, was just in the youtube search with "react programmer girl interview question search" 🤣🤣
Your video is actually really really good!
At first I thought "oh this is basic stuff, nothing new here..."
But then you added layers of complexity which were explained in a simple an informative way!
Way to go!
Id become a big fan and a regular atyour channel if you keep uploading this type of videos!
Your content is awesome!
Thanks! 😃
@@mewtru you look like Marissa mayor. Probably the reason I clicked on the vid. 😀
me too. I learned a lot especially with the debouncing, throttling and abort controller sections
A lot of info packed into this video.
Requires a couple of rewatchs to cement the idea.Thank you for content like this.
Glad you enjoyed it!
I like how you increase the complexity of a common frontend task step by step in an easy to understand manner with multiple solutions. Subscribed.
i love it how you're covering all the concepts and not just step by step as guides normally do,
thanks
That was beautiful! And your giggle after the debounce worked for the first time :D
Love that format ❤️.
Didn't feel like another step by step tutorial video rather a more in depth tutorial of underlying concepts.
Really loved it ❤️
Glad you liked it!
This video shows more advanced cases and more advanced information. Though i am not using React, i will rewatch and will implent ideas. This is golden informatioon. Thank you!
Nice job! I interview folks all the time and I rarely get this much detail. The only extra bonus points I would have like to have seen would have been touching on alternative options like filtering from a stream or using a library like react query. But, I still would have hired you 😂. To all the newbs out there, lots of folks don’t know this much and still get hired to entry level positions. Thanks for the video.
This lady knows her stuff. I dont think its fair to compare to noobs?
@@Fishamble Re read the comment brother
Oh that's great to hear from someone that does interviews! Thank you so much I feel better :).
I always get stressed out when hearing about coding interviews being a mess etc..
i like how you started from the basics to more complicated stuff ! waiting for more videos like this
Tru it would be great if you continue making this type of videos. Haven't heard about throttling before it was so helpful
wow, it was really interesting information about debouncing value!
fantastic job going over this. I had to build a very complex version of this for work and it can totally be challenging when asked to do it on the spot. Thanks for covering this, subbed.
Thank you so much :)!
Nice content. I just wanted to point out at 3:20 they are called immideately invoked function expression. Keep it going :)
Really interesting watch, most tutorials don't cover production ready code, which I think was a great addition. Definitely got some tips from this, although I'm a solo dev on a pretty huge MVP product so my definition of production ready is a little different to yours atm 😂
Haha definitely tried to skew more towards code you could write in an interview vs. being super production ready! But thank you :D
Really enjoyed how you described your thoughts and explained everything you wrote, thanks!
Thank you so much :D!
mewtru keep doing these explanation videos its so so helpful, appreciate it so much
i like the way you explained the idea , we need more from this , all the best
Tjerrr this is amazing! Everyday I feel more and more like an intern hahah. Subbed!
One small note: In these tests it's often a good idea to also write down how you can further improve the code. For example, since you've nailed down the data fetching abstraction you might want to break it further down into a generic fetching hook, which ultimately leads you to libraries like react-query.
It shows you have an in-depth knowledge of how it works, but also understand that these patterns are encapsulated nicely in libraries, if you choose to go that route.
This was amazing. Thank you for making it Mewtru.
Thanks for this exercise! That's real fun :)
To be honest this is something I did several times by the past, so it's very interesting to see somebody doing it his way!
About the query.length => years ago I found a very good way to improve this way better.
1. setInterval on input (like 1000ms),
2. loader on UI while there's no response,
3. if new input, clear interval, repeat :)
4. no new input, loader disappear, data appears
2 effects there. The first is: comfortable for users. The second: never spam your API.
God ! I just saw you're doing it :) haha commenting while watching.
@@codewithguillaume Hahaha absolutely no worries! I like the live commenting as you watch 🤣
AbortController ❤️
I knew when i watched this it was going to be useful in the future, just implemented a debounce at work with this as a reference, thank you!
Just found your channel through this video and I love it! Your explanations were so clear and understandable and this was such a relaxing yet interesting video. New sub!!
Thank you soo much for explaining everything. So many youtubers just say what they do and don't explain anything
I found this example really useful! thank you for making a quality video explaining this in detail, when implemented with a react useEffect!
You're very welcome!
Only just found you, this was an interesting little video, some great layers going in to solve the problem.
I've edited this comment because you answered the question toward the end of the video!
First time seeing one of your videos. Instant sub! Great stuff. Perfect for the job seeker who’s past the beginner level.
nice vid. more of this please :) and/or please cover about the cache, being production ready codewise. thanks!
I have an interview next week and this helped me a ton, thanks!
Glad it helped! And good luck :)!!
Great video! My opinion regarding caching results for less loading time: In your case, where you have simple data that doesn't change that much, it's okay to cache results but if you have data that changes all the time, you would need to fetch data for each request. Otherwise customers will be quick to say "why aren't we seeing fresh results?"
Thank you, the way you explained everything was so easy to understand! Looking forward to a day I can explain as well as you.
im new to react and have only made one application with it, but you explained everything so well and were so easy to follow. gonna check out more of your videos !
To be honest, I have replayed this video so many many times, just to go through this custom hook example again and again. There must be more potential of it besides debouncing, it is fascinating..., thank you so much 🙂
Sick way to describe concepts. I am a 1.5x watcher and I was amazed on easily you explained everything.
Thank you so much :D!
Your videos deserves millions of views 👍
This was really fun to watch. Loved it!
Awesome video! Learned a lot about frontend today. Thank you!
This is exactly what my HR asked me for my interview 😂😂😂😂, thanks for your video that's so much specific explanation.
honesly I was wondering why this is 23 minutes, but I think its absolutely worth it, thank you very much for this very informative video.
Wow, at first I thought it was a very simple question, but once you got into it, I learned a lot on how much there is it. Great video!
funny i just had this task as a preparation for a technical interview. whats wonky is seeing this done in react and the suffocation created by useState and useEffect. i did this in vue and computed properties. in addition highlighting the query string in the results. great video though, like the calm and collected way you presented this.
No, but this was amazing to watch and I think I learned a lot. But I definitely dont understand Javascript nearly enough to do any of this haha. I subbed though, you are a fantastic explainer, I normally struggle with these types of videos.
Don’t worry! It takes time to understand this haha, I remember taking a whole week as an intern trying to debounce some search 😅. But thank yo uso much!!
Thank you for making this video. It was super helpful.
Of course :) I'm glad!!
Add a tip.. keep track of requests and update data correctly thats the crusial part.. slow requests may override the last requests
This pattern is usually coded to grab the data just once and filter client side. Great vid, very informative.
Thank you :)!
awesome!! learnt a lot about react.. the whole game is about knowing how to use useEffect..
Really like this videos! Awesome content. I'll be subscribing for more, for sure! thank you
With RxJs debounce is built in, plus Angular would reduce the code in half. Definatly cool to see the native version/react way of doing it. But I'm glad I never jumped on the react hype train.
Great video, very informative. Thank you, keep up the great work!
Nice one!! Just earned a new subscriber
i liked the way you handled request cancelation with flags :)
Loved this! Need a whole series of these!
Mortal Kombat 2 cab === instant sub...also you should build a retropie to run literally every arcade game!
Omg that’s the plan eventually!!! This was a Christmas gift haha :)
I'm working on a project currently my position is intern and I've to use denounce ( i knew the concept but not able to implement ) Now i can proudly say I can easily implement. Thanks for your great and quality 💕 content.
Ps: really love your expressions 🥰
Implemented successfully and truthfully happy 😁
Ladki ka chakkar babu bhaiyya ladki ka chakkar 😂😂🤣🤣
@@InsaaZayn babu bhaiya ap to direct he poch gey 😜
@@InsaaZayn kam bhi keya ha babu bhaiya
I wish YT had a super like feature so that I give it to this video
amazing, More videos like this mewtru !
This was a pretty solid video! Shook that you managed to explore so many things in one problem. Awesome conversation, mewtru! 🏆🎊💯
Thanks so much!! I'll try and make more like this :)
Bring more of these
Understood pretty well. Thank you 😊🫡
I definitely can't. I'm a beginner and will be greatefull when reach 50% of this knowledge. Amazing video!
Glad it was helpful! And one day you will have 100% and more :)
So this is how you implement a feature like this in React. I’ve done this in Vue and Blazor before. Good to know. Any sort of auto-completion should implement debouncing. If you don’t, and you ping my API on every key press, I’m going to throttle your application request limit.
Who said being a frontend developer is EZ ? thank you Mewtru for showing the amount of work to put into a single autocomplete component... It would be cool to learn more "best pratices and programming techniques" to ensure performance. We all know React, Vue or whatever ... but do we know the real engineering behind a production-ready app ? Not sure... Plz teach us more
explanation so cool and clearand easy tny for that much love
As a brand new developer, this is completely over my head, but I hope to one day understand this video 😂
Thanks for sharing and keep going!
no need to use the IIFE jsut define the fucntion and invoke it below. also you will see annonymous in errors when using the IIFE
Great Content! Much love
Thank you!!!!
Thank you so much, for this helpful video, I wish you all the best ✌🏻❤
I subscribed for two reasons
1- I fell into this trap during an interview 😅
2- Mew is my favorite pokemon 😍
Yesss mews great :D and now you’ll do great at that interview
Cool video. If you're looking for more video ideas I would be interested in videos that go into more detail on some of the topics you mentioned: accessibility in forms, throttling, etc. I like the live coding though. Feels a lot more educational than just talking
you earned a subscriber.
I am learning react right now and I am building a project, that takes user input and displays movies based on the input. And this video is helpful to implement this feature.
Great explanation.
Learned a lot! Thank you for the video
Glad you enjoyed it!
you dont' have to use useEffect put this whole function into onchange event into input
a simple example but have a lot of knowledge, first i just watch video to learning and practice my english skills, but you surprised me
Thanks! 😃 Glad you enjoyed the video!!!
Hi, thanks for your detailed explanation, would it be possible to upload more interview questions/solutions? Your content are high quality and very detailed. Thanks for the hard work
Interesting, I honestly have never really thought of debouncing the actual value itself. I would've debounced the function call.
This is really helpful thanks!
omg too ez i was at least expecting the results to show as suggestions in a custom panel that opens from the input as a dropdown when searching with a spinner inserted in the input
Error boundaries are generally used with Class Component, how can we implement the same using Functional Component?
Very enjoyable to watch
This video helped me a lot, thank you for the content. \o
Glad it helped!
Awesome video, would like to see like this one more 👏
VSCode didn't get mad at you here, because you don't have eslint or the react plugin for it installed. Vite typically doesn't include all that extra stuff for linting.
I like it, but I was totally expecting a trie data structure to be used. I mean, this clearly won't scale.
I really enjoyed this. I'd definitely love to see more of these interview question type of content. Some really great ideas and solution to the problem too. Good work,
which themes?
hi love the content
I´m learning React and I get lost in the middle of the video, but I like it. Just a simple question, this could be a techinical test in a junior position interview?
BUT... CAN YOU CENTER THIS DIV?!
Great video! Thank you so much
how about using Suspense and useTransition instead of debouncing ?
So I am not ready for a programming job.
Awesome. Seems like I have a lot more to learn
when i implement debounce hook stop bring me the values
ill comeback to this video someday and understand everything she said
learning js rn :p
why am i seeing angels this days
Loved the way you explained debouncing! Great work! What vscode theme are you using?
up
Really a good content, hope there are more coming in the future...also miss your twitch stream.
I think I'll stream tomorrow! Thank you so much though :)!
@@mewtru have any stream calendar ??