This is a good beginner React interview challenge question
Vložit
- čas přidán 30. 10. 2022
- Just building another small little thing in react.
💬 Discord / discord
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
📁. GitHub github.com/codyseibert/youtube
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
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 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.
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.
These are some awesome videos, man. Really like how you talk through each step of the process
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!
This was great especially as a refresher, please do more of these!!
Love it! This kind of video is so helpful. I learn so many things from this. Thanks!
The custom hook was a nice touch, I've never seen that used before. Great as usual, thank you!
It's very comforting to know that going off the rails is normal, it's borderline crippling for me
Exactly 💯
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 :)
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.
As a beginner this video was really interesting to watch, I got to learn a bunch of things, thanks!
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
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!
great video and useful side remarks! thank you!
Love you show us how to escape the fails, most important in learning
sorry for distraction!!!!!! Dude that is really helpful. You hardly get this information so well done.
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
I appriciate a lot for you for this content, it helps a lot!
Excellent content. Thank you
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?
Thank you for this example.
I would like to see more interview challenges
great interview challenge , i need to know the extension for display error while coding , it is really great 👍
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.
Hi, can you make a react+typescript+vite+tailwind workflow video? Thanks.
heeey, this vid is awesome, thanks!
What is the extension for the red error messages on your screen while coding?
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
Good job babe!!!!
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
I love this.
cool video, thanks 🚀
I wish interview questions were like that.
In my experience they ask stupidly theoretical questions like "What design patterns do you know?"
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
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.
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
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
you are really a treasure
Great stuff! What theme are you using?
In description
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 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
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
this was basically my interview question about 2 months ago :)
Awesome! Hope you did well
@@WebDevCody Yes! Ill start next month :)
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
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
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
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.
Very good😀❤️
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.
I am waiting for another LeetCode video
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.
Thanks
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.
what font is this
good stuff
What theme is this?
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
cool video)
Awesome
Danke!
Thank you!
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.
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.
I feel like using ids is something that should be avoided due to default js behaviour of them.
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
Bravo TNI
21:31 is that a doggo in the background
Probably, or my kids 😂
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!
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
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
uncontrolled input + useEffect with word as a dependency
lmao @ 10:35
Thanks for the walkthrough. I would also add `/words?rel_syn=${encodeURIComponent(word)}`
'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.