This is really good content. Very well done with explaining what you are doing and WHY you are doing it. So often I see things like this where no explanation of why is given. Bravo.
Sooo good! Thanks for that. I like very small examples that show basic functionality. The more complex things on your channel are of course also always very helpful, you are doing a really great job 👍
This video was absolutely fantastic! I am quite new to react and programming in general and while some things i managed to solve by myself, you gave so much insight to every step of the challenge which is super helpful. Thank you for your amazing content. Even though i don't speak English natively you explain things so well that it is very easy to understand.
thanks for video. I also want to mention that react needs keys for every element of list, its not because of linter. when you make changes with an element, react should know what the element should be removed or changed or added. it related with DOM. because react in this moment need to change DOM node or DOM element
Great video Cody! I solved it basically in the same way as you except for the custom hook. It was a very goodreview of custom hooks btw. I was also unaware of the Slow 3G option and it is gonna come in handy in the future. I split the search bar and the list into two separate components. Do you think this approach is good or is it better to keep it all in one component as you did?
@@WebDevCody learning the small things makes so much impact , it’s not about getting the job i feel it’s more how curious i am towards this and eager to learn as much as i can and seeing you build small stuff makes me so much motivated and just build stuff
I noticed that on your fetch api, when you set your synonym state to the data returned from the API, you didn't have to directly set the value like setSynonyms(data). I didn't know it works with just setSynonyms() and passing nothing to it.
quick question. why is it, that we don't need an useEffect-hook for the data-fetching? and very good video, more of this pls :D also like your shorts very much, keep it up.
@@WebDevCody i didn't think we needed one, i kinda just didn't understand why we dont need it :D i was under the impression that i have to use useEffect every time i want to fetch data.
@@battimi2647 nah useEffect is whenever you want react to watch a state variable and run a side effect when that variable changes. It’s similar to a vue watch or angular watcher. It’s also useful when you need to run code when the component mounts or rerenders, which is usually what we see, fetch data from api on mount
Since I saw many developers wrap it up with useEffect i dug deeper and found out it's side effect, I guess we need an useEffect only when we fetch initially let's say on on page load
Interviewer: We'd like you to solve this "sample problem" to prove you can do the job. Sucker: Writes their app for them. "Do I get the job?" Interviewer: "You just wrote the app we're hiring for, unfortunately the position is no longer required".
12:05 Can someone explain what exactly this process of setting a type does? I've seen it before, but never really understood it. Are there any videos that talk about when/why you'd do this? Thanks!
you can create types which you use in other places of the code base to add to function parameters so that typescript can verify if you are passing the proper things around
I'm a week in learning react and I was able to solve this challenge on my own. Although it took me way longer than you I feel accomplished haha. When I came back to look at your solution I gained more knowledge about the react. Please keep making these challenge question videos they really help.
Cool tip for the react “key” that is required is to use the built in “index” argument that is included with the map callback function. Guaranteed to be unique every time.
That’s actually bad practice. If you use index your stuff can easily render incorrectly if you add or remove from your array. I made a video on that issue
Cool video. One question though, is this really junior level? I remember couple of my first interviews, they would just ask about setState and useEffect, how would you pass props to a child component, just basics. Just seems like a lot for a junior dev to know about .env variables, separating component code from API/services, accessibility.
@@WebDevCody As long as is not through live coding, otherwise your screening for other things besides dev skills, which aren't always needed. If the job doesn't demand being able to code under high pressure (which no one should under right management), then live coding is pointless. Live coding puts the person interviewing in such a vulnerable state that it takes them back to sort a professor/teacher relation with the interviewer.
@@JoseRodriguez-zt5it what should an interview consist of if not quizzing their technical abilities? There are people who can easily memorize terms for interviews and not know how to solve real problems in code.
Since I'm aspiring to be junior dev in some near future i asked my friends that already are devs how junior interviews look they all agreed it's completely different from company to company. Some can even hire you if you didn't do that good but they have seen that you do have potential and understanding of what your doing they will be willing to teach you and invest in you, some don't even require react or anything other then stock js but on the other hand some have almost same requirements for junior as for senior they just want to pay you less...
@@WebDevCody you could test by giving them a technical challenge to do within a certain time frame, like 2-3 days. Then review the code they deliver, and confirm they wrote the code by having a call and ask them questions about the implementation. I think it's a way more accurate indication of how a dev will actually work than doing something like a React tic tac toe in a live coding scenario.
Your text manipulation (deleting lines, copying things, moving stuff around) is a lot faster than mine. That's something I'd like to get better at, do you have any videos on that?
I'd rec learning vim motions, speeds up that kind of thing a lot once you get used to it. Awkward as hell to start with though but worth powering through it.
If this is for websites then why not use Live Preview plugin since it’ll bring the website your working on the side of the code so you can see each change as you put in a new line and can test it while also looking at the changes for your desired look
Just a question. In general I have been taught that when we are fetching data from an api is better to do it inside a useEffect! Isn't this the case here or am I getting something wrong?
This is perfect example to use uncontrolled input, because now you are rerendering all the the, its better to access it with ref, when you need it. And learn to ALWAYS style with classes, no tags nor IDs.
I avoid uncontrolled inputs. But if that works for you that’s cool. The react docs explicitly say “In most cases, we recommend using controlled components to implement forms”, so if you want to do something non standard that’s fine I guess
@@lukasvaic7159 because now you’re living in a world outside of a react and doing vanilla dom manipulation for no good reason. Just use vanilla js if you want to manipulate dom objects manually
@@WebDevCody The performance improvement is significant when employing the use of uncontrolled inputs. There's a reason why the most used form library (react-hook-form) embraces uncontrolled inputs.
I don't know how double ? Works. But if you are doing ternary operation maybe it is interpreting the data muse to be true. That's why you getting same end point. Just an opinion. Or you mistaken this ? For this | ?
Great demo for problem-solving using React. Any chance you could make a video regarding custom hook specifically, I found it's hard to digest with the content given in this video. Once again, awesome presentation skill, Thanks.
Not too sure, maybe questions deeper about react performance, design choices for building abstract components, questions on order of execution for life cycle events and hooks
Create React App polyfills all the base node things, but Vite does not, that's why the process.env stuff didn't work. Those polyfills are part of why CRA is so slooooow
In this case binding the onChange event to update state that holds input's value is bad practice. You should just attach 'ref' to the input and then access this data via ref.current.value in onSubmit handler.
@@WebDevCody Maybe 'bad practice' was too harsh there. I meant that chaning it to ref will result in small performance gain, because component doesn't need to rerender itself everytime you type.
This is really good content. Very well done with explaining what you are doing and WHY you are doing it. So often I see things like this where no explanation of why is given. Bravo.
Didn't realise 30 mins have gone by! This is great! Would love to see intermediate/senior react interview questions of this sort as well, please!
Bro these code challenges have been a blessing for my inteview prep and solid understanding of React, keep them coming!
Sooo good! Thanks for that. I like very small examples that show basic functionality. The more complex things on your channel are of course also always very helpful, you are doing a really great job 👍
The custom hook was a nice touch, I've never seen that used before. Great as usual, thank you!
This video was absolutely fantastic! I am quite new to react and programming in general and while some things i managed to solve by myself, you gave so much insight to every step of the challenge which is super helpful. Thank you for your amazing content. Even though i don't speak English natively you explain things so well that it is very easy to understand.
Love this playlist of yours. Your walkthrough and explanations are really helpful. Thank you so much!
This was great especially as a refresher, please do more of these!!
Love your humility, which is rare these days. I'd hire you in a sec just for the fact that you're willing to put yourself out there.
Firstly I've solved that without hooks but your approach is brilliant. I've refreshed my skills. Thank you!
It's very comforting to know that going off the rails is normal, it's borderline crippling for me
Exactly 💯
As a beginner this video was really interesting to watch, I got to learn a bunch of things, thanks!
These are some awesome videos, man. Really like how you talk through each step of the process
Love you show us how to escape the fails, most important in learning
Good stuff. I'd probably shove in error handling in there as well. One thing I learn along the way was to always think of unhappy path as well.
sorry for distraction!!!!!! Dude that is really helpful. You hardly get this information so well done.
thanks for video. I also want to mention that react needs keys for every element of list, its not because of linter. when you make changes with an element, react should know what the element should be removed or changed or added. it related with DOM. because react in this moment need to change DOM node or DOM element
Love it! This kind of video is so helpful. I learn so many things from this. Thanks!
Great video Cody! I solved it basically in the same way as you except for the custom hook. It was a very goodreview of custom hooks btw. I was also unaware of the Slow 3G option and it is gonna come in handy in the future. I split the search bar and the list into two separate components. Do you think this approach is good or is it better to keep it all in one component as you did?
This channel is really making me learn so much! Thanks
Glad to hear that!
@@WebDevCody learning the small things makes so much impact , it’s not about getting the job i feel it’s more how curious i am towards this and eager to learn as much as i can and seeing you build small stuff makes me so much motivated and just build stuff
Loved this video! Would be awesome if you ever do one of these again, I wouldn't mind seeing you doing some tailwind to style :)
would love to see more React interview questions on your channel, thanks for the video.
Hi, nice content, I am currently preparing myself for interview)). looking forward to more of such videos
great video and useful side remarks! thank you!
I appriciate a lot for you for this content, it helps a lot!
Thank you for this example.
I would like to see more interview challenges
I noticed that on your fetch api, when you set your synonym state to the data returned from the API, you didn't have to directly set the value like setSynonyms(data). I didn't know it works with just setSynonyms() and passing nothing to it.
I wish interview questions were like that.
In my experience they ask stupidly theoretical questions like "What design patterns do you know?"
Nice video! What's the name of that tool you used for selecting portions of the screen ? It seems very useful!
it's build into mac os for taking screenshots
Excellent content. Thank you
quick question. why is it, that we don't need an useEffect-hook for the data-fetching?
and very good video, more of this pls :D
also like your shorts very much, keep it up.
Because the data is fetched when the form is submitted. Why do you think we’d need an effect?
@@WebDevCody i didn't think we needed one, i kinda just didn't understand why we dont need it :D i was under the impression that i have to use useEffect every time i want to fetch data.
@@battimi2647 nah useEffect is whenever you want react to watch a state variable and run a side effect when that variable changes. It’s similar to a vue watch or angular watcher. It’s also useful when you need to run code when the component mounts or rerenders, which is usually what we see, fetch data from api on mount
how about making it like autocomplete where the results are coming up as the user types without hitting the submit button
@@opie0818 exactly what i was thinking
setTimeout. Put up a spinner before then.
That would be very expensive because you would have to make an API call on every keystroke.
What is the extension for the red error messages on your screen while coding?
Great stuff! What theme are you using?
In description
you are really a treasure
heeey, this vid is awesome, thanks!
I have a question, since fetching an API is a side effect w.r.t react, why haven't you wrapped fetching in useEffect? Is there a reason
Why would I need to? If the fetch happens on the form submit, why do you think it needs to be in an effect?
Since I saw many developers wrap it up with useEffect i dug deeper and found out it's side effect, I guess we need an useEffect only when we fetch initially let's say on on page load
I love this.
Interviewer: We'd like you to solve this "sample problem" to prove you can do the job.
Sucker: Writes their app for them. "Do I get the job?"
Interviewer: "You just wrote the app we're hiring for, unfortunately the position is no longer required".
Never met someone so butt hurt from interview questions in my life
12:05 Can someone explain what exactly this process of setting a type does? I've seen it before, but never really understood it. Are there any videos that talk about when/why you'd do this? Thanks!
you can create types which you use in other places of the code base to add to function parameters so that typescript can verify if you are passing the proper things around
can you make one video about debounce search challenge in react and typescript
I'm a week in learning react and I was able to solve this challenge on my own. Although it took me way longer than you I feel accomplished haha. When I came back to look at your solution I gained more knowledge about the react. Please keep making these challenge question videos they really help.
Cool tip for the react “key” that is required is to use the built in “index” argument that is included with the map callback function. Guaranteed to be unique every time.
That’s actually bad practice. If you use index your stuff can easily render incorrectly if you add or remove from your array. I made a video on that issue
@@WebDevCody Good to know...thanks!
Cool video. One question though, is this really junior level? I remember couple of my first interviews, they would just ask about setState and useEffect, how would you pass props to a child component, just basics. Just seems like a lot for a junior dev to know about .env variables, separating component code from API/services, accessibility.
Every company has different requirements for a junior. I personally want to verify the person can at least code something basic
@@WebDevCody As long as is not through live coding, otherwise your screening for other things besides dev skills, which aren't always needed. If the job doesn't demand being able to code under high pressure (which no one should under right management), then live coding is pointless. Live coding puts the person interviewing in such a vulnerable state that it takes them back to sort a professor/teacher relation with the interviewer.
@@JoseRodriguez-zt5it what should an interview consist of if not quizzing their technical abilities? There are people who can easily memorize terms for interviews and not know how to solve real problems in code.
Since I'm aspiring to be junior dev in some near future i asked my friends that already are devs how junior interviews look they all agreed it's completely different from company to company. Some can even hire you if you didn't do that good but they have seen that you do have potential and understanding of what your doing they will be willing to teach you and invest in you, some don't even require react or anything other then stock js but on the other hand some have almost same requirements for junior as for senior they just want to pay you less...
@@WebDevCody you could test by giving them a technical challenge to do within a certain time frame, like 2-3 days. Then review the code they deliver, and confirm they wrote the code by having a call and ask them questions about the implementation. I think it's a way more accurate indication of how a dev will actually work than doing something like a React tic tac toe in a live coding scenario.
this was basically my interview question about 2 months ago :)
Awesome! Hope you did well
@@WebDevCody Yes! Ill start next month :)
I think i am in big trouble because i can catch up all the things he walk through in this video but i can never think like he did here.
thanks for the video, i have a question tho,
what addone did you used do show the error inside vscode ? at 16:25
In description
great interview challenge , i need to know the extension for display error while coding , it is really great 👍
Your text manipulation (deleting lines, copying things, moving stuff around) is a lot faster than mine. That's something I'd like to get better at, do you have any videos on that?
I'd rec learning vim motions, speeds up that kind of thing a lot once you get used to it. Awkward as hell to start with though but worth powering through it.
I have a few videos on my vs code shortcuts I use
Hi, can you make a react+typescript+vite+tailwind workflow video? Thanks.
If this is for websites then why not use Live Preview plugin since it’ll bring the website your working on the side of the code so you can see each change as you put in a new line and can test it while also looking at the changes for your desired look
I typically don’t work that way so I don’t want to record a video demonstrating a way I don’t actually work
Just a question. In general I have been taught that when we are fetching data from an api is better to do it inside a useEffect! Isn't this the case here or am I getting something wrong?
Fetch data when data should be fetched. If the api doesn’t need to be hit until you click a button, you don’t need an effect
hey, do u recommend using vite to all projects? is it better?
if you are building a SPA, then yes I would, or use Next.js
This is perfect example to use uncontrolled input, because now you are rerendering all the the, its better to access it with ref, when you need it. And learn to ALWAYS style with classes, no tags nor IDs.
I avoid uncontrolled inputs. But if that works for you that’s cool. The react docs explicitly say “In most cases, we recommend using controlled components to implement forms”, so if you want to do something non standard that’s fine I guess
@@WebDevCody Do you have a specific reason?
@@lukasvaic7159 because now you’re living in a world outside of a react and doing vanilla dom manipulation for no good reason. Just use vanilla js if you want to manipulate dom objects manually
@@WebDevCody The performance improvement is significant when employing the use of uncontrolled inputs. There's a reason why the most used form library (react-hook-form) embraces uncontrolled inputs.
@@John-mj1kk significant is a stretch for an average form with validation. It maybe saves you 2ms for a form with 20 inputs
I don't know how double ? Works. But if you are doing ternary operation maybe it is interpreting the data muse to be true. That's why you getting same end point. Just an opinion.
Or you mistaken this ? For this | ?
no clue what you just wrote.
@@WebDevCody me too. Probably using a different react.
I am waiting for another LeetCode video
cool video, thanks 🚀
Thanks
I feel like using ids is something that should be avoided due to default js behaviour of them.
what font is this
Great demo for problem-solving using React. Any chance you could make a video regarding custom hook specifically, I found it's hard to digest with the content given in this video.
Once again, awesome presentation skill, Thanks.
21:31 is that a doggo in the background
Probably, or my kids 😂
What theme is this?
Thanks for the walkthrough. I would also add `/words?rel_syn=${encodeURIComponent(word)}`
What is the hardest react interview question?
Not too sure, maybe questions deeper about react performance, design choices for building abstract components, questions on order of execution for life cycle events and hooks
Create React App polyfills all the base node things, but Vite does not, that's why the process.env stuff didn't work. Those polyfills are part of why CRA is so slooooow
I though vite is fast because it uses esbuild under the hood and CrA uses webpack
@@WebDevCody That's another reason! There's a lot of stuff that makes CRA slow lol
Awesome
Great vid
how about making it like making it autocomplete where the results are coming up as the user types without hitting the submit button
Good job babe!!!!
Very good😀❤️
good stuff
Bravo TNI
Danke!
Thank you!
In this case binding the onChange event to update state that holds input's value is bad practice. You should just attach 'ref' to the input and then access this data via ref.current.value in onSubmit handler.
Bad practice? Since when?
The react literally say this: “In most cases, we recommend using controlled components to implement forms”
@@WebDevCody Maybe 'bad practice' was too harsh there. I meant that chaning it to ref will result in small performance gain, because component doesn't need to rerender itself everytime you type.
cool video)
uncontrolled input + useEffect with word as a dependency
lmao @ 10:35
'good' and 'white' seems like weird synonyms of 'hot'. If the context is 'people' then it's showing quite a bit of bias.
o.O
Honestly, who cares if you're bad at english or speaking. Why say weird off-topic things that provide no value. So odd.
Not sure why that seemed to have bothered you enough to leave a comment 😂
@@WebDevCody I'm having a rough time and it comes out in weird ways.