React Junior Developer Interview (Questions & Challenge)
2023 ж. 19 Қар.
101 720 Рет қаралды
Join The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
Big shoutout to Bogdan for helping with this video!
This is a React interview for a junior developer position. The interview will start with about 30 minutes of questions about React, and then a 30 minute coding exercise to build a simple React application. The goal with this is to give you an example of what it would be like to interview for a Junior React developer position, so that you can be prepared for it and get the job!
Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react
I m looking for react developer job, I have more depth knowledge than him
You know what the real challenge is? Finding a junior react developer position in 2024.
Preach
This was great. I'd love to see more mock interviews like this. Both the behaviour section and the practical section. Keep up the vids and shoutout to Bogdan. He's a braver man than I
i have been learning so much from your react videos. i have fairly 2 YOE & i always find myself refreshing and learning new things from your videos
This was fantastic, and I would appreciate additional simulated interviews similar to this one, encompassing both the therotical and practical parts.
This is fantastic! I thoroughly enjoy this type of content. Keep up the good work, @Cosden Solutions!
What a great video. I was actually amazed by how much I know about React since I could offer an answer to each of the questions after 3 years in the business, but this helped me to refresh and learn some new facts. Definitely useful.
I enjoyed this video! You seem really kind. It'd be nice to be able to work with a senior developer like you. As a junior developer, I will watch your videos often. Hope to see more content like this in the future.
Excellent video, the interviewer explaining and giving insight of the issues and ways to work around them is perfect, great job both!
this was fantastic! please do more interviews as videos and pair programming exercises. I paused the vid and did the fetch countries exercise myself before watching the second half of the video just for practise!
I've seen many videos on react since I started learning it. Never seen one like this and really enjoyed it. I tried to answer the questions before he did and I even surprised myself on how many I got right. Hope to see more content like this!
that's a great way to approach it!
I love how you teach and your approach. I wish Frontend Interviews were like this really
I have a little thing to add on top of this awesome coding interview at 37:20, defining a function, let be it arrow func or a simple function, it becomes part of the component's main body. If it's added into the dependency array, everytime the component rerenders, the function will change ( functions are basically objects in JS and on every render are destroyed and recreated ) because it will become a new instance so it will trigger the logic in the useEffect. This won't create an infinite loop, but it will certainly run more than once. Anyways, great interview!
You right
good notice.
the function reference changes, thats why if you need to call a function in useEffect and also depend it in the dependency array, you either have to define the function outside the component (doesn't change reference on re-render), OR wrap it in a useCallback. It should be more performace efficient in the first case (def func outside), rather than using useCallback on top, but thats diving into too much detail :)
great content bro i hope you keep this type of stuff up it is very helpful for devs like me trying to get a react dev job so i kan know what things i need to improve on!
I am thankful for this because I'm learning by myself and I have no idea what level I am right now, if I'm a complete noob or if I am ready for job interviews. Under stress and for a video I have no idea how I would do, but the challenge was pretty easy and I was telling the guy answers 😂 so maybe I am actually ready. I was intimidated by the challenge at first because right now I'm not using react, I'm learning something else, but the tutorials did something right because when I went step by step it just was working. I'm an very happy right now because I needed a little boost to be more brave with my skills. thank you both!
This was great. I'd love to see more mock interviews like this. Shout out to that kid for his attempt 👏 .
Thank you both and especially Bogdan for being brave to do this!
Appreciate the effort by your friend. It's really awesome. It is not easy to code if someone is watching us. He did a great job. Thank you for organising and preparing all the questions for us...
This is great content, I came here from your instagram page and would love to see another interview with advanced questions and senior developers.
Kudos to him for making himself vulnerable. Good job!
As an interviewer, it is better to listen more. Don’t be nervous, you are doing great :) and it is still interesting to watch
as someone trying to land my first Jr Role, this video is helpful. I appreciate both of you!
Did you got any job brother?
@@tahsinhimu71 yeah I did but not as. React Developer. We just use vanilla HTML, CSS, and JS
Congratulations ❤️ genuinely felet happy reading your commnet brother. As I am willing to land a junior developer job, can you give any suggestion?
@@tahsinhimu71 my biggest suggestion would be to build an application that you’re passionate about. Don’t just build something because everyone else built it. The best projects are those that you worked on from inception.
The approach with 2 useEffects is better IMO because each would be responsible for 1 thing (1 fetch all, 2 fetch capitol) then it would be easier to code split. Also you don't need second fetch because you fetched all in 1st call, just filter it with JS. Additionally I think that fetch in useEffect that listens on a variable change is a bad practice, you should always fetch on js event when possible, if it's not possible then on useEffect trigger.
lovely content, am a junior and I learnt alot, thanks 👍
Wow the useEffect solución at the end was great, very interesting aproach. I learnt a lot from this video thank you
You are the one the best youtuber i have seen so far So, be motivated and Keep Making your great quality content ✨ Thanks alot
Thank you for the kind words!
thank you so much for these react videos
great Interview, this interview really helps to prepare for the really one.
Enjoyed watching this !
Learn JavaScript well before learning TypeScript and ReactJS. I love this. I hope you can do that with a senior.
Great interview . Again amazing content bro ❤❤❤❤
I loved the video, more like this please!
Thanks for giving me more confidence that if Bogdan has 4 YEO and was struggling with this level, I am surely gonna get selected
Thank you very much. It is really useful!
This video was extremely useful to me. Thanks alot.
this is very helpful to us thank you for sharing this content ❤
Please make this kind of videos which are really helpful for freshers ❤
This is very helpful, thank you very much.
Amazing interview ........great questions .
Great Mock Interview , Thanks
Thank you for the content. I had some issues with the challenge. Mainly from understanding the given problem (which sounds so bad I know...) I got confused with the functionality of filtering the countries by capital. I couldn't shake off the thought "Why would we need to filter by capital? Don't countries only have a single capital? Are there countries that have more than 1 capitals?" stuff like that. If I was in the interview I would've clarified this with the interviewer. Not having a view of the UI also gave me troubles just like the guest haha I think I got the storing of the current filter "key" correct. However I would've fetched the country list only once. And then I would've derived a `countriesToDisplay` list which filters the "master" list using the currently selected capital. This might be wrong on some parts though... since with this approach I wouldn't "need" the `/capital/{capital}` endpoint at all. I could just go through the master country list and see which countries match the current capital Also I would've definitely tried visiting the API links manually at the start just to see what sort of response they give
Awesome!! I am a react junior as well and that resembles me soo much and my senior when she reviews my PR and suggests really concise, more efficient way of doing stuff 😄❤ and i am always like "WOW that's was way cooler!!"😂
3:44 We don't put JS in html. We put html in JS functions.
I've been doing react professionally for 2 years and exposure to it for 4 years, but actually learned some new stuff today that i thought was just convention but didn't know why we actually do it
After watching this video, I gained more confidence. Even though I am a fresher without a job, I still know these concepts better than a developer with 2+ years of experience. Should I be sad or happy 😭
First of all thank you Bokdan (sorry if i didn't spell it correctly) for your courage and your time. There are lots of people with big talk but never dare to stand there and being interviewed (with so much viewers and being recorded specially). And thanks you codsen for this content. It was amazing. I hope for more content of this type. Mybe you could try other level interviews such as senior with more complicated challenges. (Please like if you are agree with me)
Great, I love it.
Great content! As a mid level junior, around 1-2 years coding, I could see I really know a lot. Coding takes time, study and code obviously. 90% of questions I was abble to aswer, and sounds very weird he doesn`t use more basically react tools
This was terrific. Loved your knowledge drops during the interview. Is there any way we can get a copy of the code?
Need more interviews like thus
As someone self learning and hoping to switch careers. This was a tough watch. Makes me feel like I should be applying right now but I can’t imagine this is “junior” level.
do you think the junior level role would be easier questions?
@@endera782 I could see the confusion, I was more referring to the person being interviewed. I feel like the questions were on par with what I would imagine
@@justinrivera6749 Yeah the person being mock interviewed has 4 years of experience. Really wish they would do these kinds of videos with people are either aspiring juniors or recently hired juniors.
this is good interview and love it learn from it
I'd love to be interviewed :D Great video, and a very good applicant :)
Let's take you interview
Love these! If you're looking for more interviewers I have 3 years experience working at a fortune 500 insurance company. Would love to do something similar sometime :)
No pressure - JUST do your BEST. I love it, lmao
I enjoyed it. Can you do more?
Being a senior react dev, the only question i had a problem with was the jsx one lol.. like how do i explain what it is.. so funny :)
I have one performance question about the last part. And would really appreciate if you would answer me this: You are fetching the all countries list no matter what when the component is mounted. It means that countries in the Component always will be array of 250 objects (as the capital on first render is not set). If we already have the array of all these objects in our component state then why should we repeat the fetch for single capital/country on the onChange on Select component? It seems like unnecessary queries to our server/database - which i don`t think is the best performance and with big scale (like thousands of users that could easily be some issue). Wouldn`t be better just to filter the array that we already have in our component state (countries) Or maybe even better, maybe we don`t want to filter whole 250 elements everytime user interacts. So then we prefilter our 250 elements array with the FILTERABLE_CAPITALS and return the new array filterableCountries - with only 6 elements. This would be only 2 operations on mount component - fetching the array once, and filtering it once. And then onChange on our Select we would filter our small compact filterableCountries - 6 element array instead of fetching data from server for every user input. Now we have only 2 functions that could potentialy slower the application - once the fetching - which can take X time depending on the server response. And secondly prefiltering our fetched data witch should be quite fast unless we receive like dozens of thousands elements (but then we shouldn`t fetch it all in the first place ;) For me it seems like a more reliable solution, less depending on server, creating less network transfer and all in all would be faster therefore better for the User Experience. If i am wrong please correct me.
Oh bro you are a genius, what are you doing here on KZhead? You are supposed to be at a senior position in a tech giant corporation, kinda feels weird to me that you would have enough time to watch someone else's interview and then try to find mistakes in their attempts rather than caring about your own one. The efficiency of application ofcourse does matter but this is an interview where the interviewer is testing his logical thinking, of course performance optimization is mandatory, but not in a small react interview, everyone is not as gifted as you to show brilliant presence of mind while at an interview.maybe he was too nervous to think that way.
Hey it's a good question, nice insight. In this example, with 250 fetched elements, yes you could easily just fetch the list of countries once, and then filter countries from your original fetch. This would be faster in this scenario, but probably the interview wanted to demonstrate you can perform dynamic network requests on filter value change. However like you noted, this approach doesn't scale. Lets say you're working with a different set of data, like fetching invoices of which there could be tens of thousands. In this scenario, you'd most likely never fetch "all" invoices, you would just fetch a paginated set of them. Then for filters, you still need to issue a network request to get a filtered set, since you'd never have the full set to work with.
Thank you for the video. Completely unrelated, but what chair are you using and do you recommend it?
it's from ikea, I really like it but I'm not sure of the model haha but it's pretty common
I would say this is an actual junior developer interview, because the candidate is actually a junior and knows everything the same as a junior developer, unlike other mock interviews where the candidate for a junior role is actually a lead software engineer, great work brother.
The canditate has at least 4 years of experience and knows fullstack, not JR.
Hey can you add some links of them to whom you interview, like bogdan. Also do you use vim edition extension if yes then name a video of it please, I want to use this on my setup too
More of this... Thanks
great video, with this I realize how I'm not a junior anymore haha T_T
Very useful, thanks! Unfortunately, Bogdan doesn't really looks like a 2y experienced dev, he's kinda avoiding every question. But thanks for the video!
I have a thought. In condition that we get the all 250 countries, we could just find counrtries by capital like countries.find((country) => country.capital ===value) without fetching. but if we have 20 countries from 250 this approach wouldnn't work. of course.
Nice job, guys! Interesting video. I just really gotta ask - is the bro really a mid level developer? It's a little weird how some basic stuff in the coding part and the questions before that got him confused. Those things wouldn't confuse a mid level react dev IMO.
well, imagine if you were put on the spot without preparation and filmed in this one take interview, how would you do?
Lol, definitely not as bad as this guy right here, saying that with respect to the junior developers. I do not believe this is a mid developer, at least from what I see - for me, he is not. Maybe a junior with some idea what he’s doing but come on… a mid developer to name the element index and name the index itself country, like wtf!? He can’t be a mid developer.
❤❤❤
i would have passed this hurrah 🤩
He did great....
great video, but less code doesnt mean better code. Its important to have your code made for easy readability
As a developer who has working experience of 1.5 years with react, I was not expecting such answers from him🤨🤨
no hate to the guy but hows he not used useRef with over 2 years of react or not knowing what a controlled input is?
❤
Without useRef, there's also a way with using an id and making dom manipulation with it to focus....
I also want to do a react interview mockup with you. How could it be so??
where can I apply to do an interview with you?
Great interview! I am also Junior React Developer, and this means a lot. Bogdan looks like a guy from my contry Serbia, do you have his KZhead Channel or Linkedin to watch more?
He doesn't have youtube hahaha he's just a friend I worked with at a company! And he's Ukrainian! But believe it or not, I'm currently living in Belgrade (but I'm not Serbian)
Oh what a coincidence 😂 Hope you like it here! @@cosdensolutions
@@cosdensolutionscan you share his github?
@@cosdensolutionswow great haha. Didn't expect that. Hope you like it
If only the real interview is this easy I would have been a junior react dev by now lmao
I started learning react a month ago and i knew way more than thia guy.
gold
Hi, you are doing great. can i get a chance to to give you a mock interview on react?
Can you share the link to notion with questions?
He said he haven't used anything, so is he really a React Developer or just HTML developer?
What theme are you using for vscode? Can I ask for your vscode settings?
check description
I love how at the end the interviewer became Super Saiyan lol
Hahahahaaha nice
Can someone if needed add some more questions if we need anything more then this? im getting ready for interview.
Outside of the person being interviewed. Is this the type of coding challenge that would be asked in a technical interview? I’ve never done one and have always wondered
yeah, I've had challenges like these quite a bit. This was in Europe though so might be different elsewhere
Like seriously these kind of questions are enough for junio react developer interview?
Yeah what else would you want? 😅
I want interview too!!!! JUNIOR!!!!!!!!!
This is a prime example of why you shouldn’t start off using so many libraries- you will miss the fundamentals
Fundamentals are super important I agree! But I also think he did well
@@cosdensolutionsyou’re being kind. Imo he struggled way too hard with the API call, something you’d expect from an intern
@@lalaalal7847 except he might not be fetching data every day at his current job and he really kept this real without preparing a "script" of what Darius will ask him. Yes, an intern would have this knowledge fresh probably and would answer it faster. I wouldn't personally be so judgy with someone having a live coding session interview, but hey, I respect your opinion. I am sure he was expecting that some ppl will judge his knowledge when he had the balls to accept this interview 😂
nah dude, you haven't seen what interns really can do. This was great, and he was also unprepared we did this spontaneously
that's exactly it actually
Can I pass an interview, too?) I’m looking for practice before going to US. Or we can do the reverse and I can interview you 😉
haha maybe, when I do the next one ☺️
I like this video but you speak very fast for me and also people who does not have english as first language. I just wanna write that :D
you can show transcript for this video like I do :)
It is helpful if you share questions in description
My worst nightmare for interview dsa with react js...this one somewhat scary interview for me.
Sorry but these guys have it wrong. It should be the other way round: JSX is basically JavaScript (syntax extension for JavaScript) and it allows writing HTML-like code within JavaScript.
How can he forgot useState 11:15
I have 0 years of professional experience and I could give solid answers and solve the coding challenge of this video, does that mean I’m job ready lol?
Yes of course you can, if you can build great things with it then why not
I refuse to believe that this is a mid level developer with 2+ years of experience. These are the things that KZhead tutorials teach you while you make a todo app. or a weather app.
True. Not trying to be too hard on the guy but someone with 2+ years of dedicated React experience should definitely know that a map function does not have the index as the first argument.
You always need to account for the fact that a lot of people in tech are not so good with putting thoughts into words, hence all the jocks in the movies. As a dev you also know a lot and write a lot of code from experience, rather than remembering technical definitions. Also, there are LOTS of devs with 2-3 years which are terrible and missing even basic concepts due to the luck they had with the mentors they got in their first job (There are literarily companies that will assign juniors on projects with no experienced supervisor or team colleague).
He migth be nervous, having someone watching you code isn't that common
Once manager was sitting next to me and asking me change code and he was testing. It is also same I guess.
@@andreisalagean1241 Yeah, I'm not actually talking about the first part of the video. That's completely fine, people who learn coding by just creating stuff won't know the definition and most technical words. But if you've been coding for 2+ years, and have problem making API calls, mapping arrays, or you're giving index to the key in a map. that's a completely different issue. Also the last part of the video where he tries to make a different API call entirely for getting a specific capital was also surprising. If he was an actual junior, the skillset seem to match, but as someone with 2+ years, it just doesn't make much sense to me.
jsx is js inside or html or vice versa?
it's a new thing that mixes both
if this is junior interviews i think i'm a senior lol
don't underestimate the mid-level range ☺️
Maybe his experience is 2 months instead of 2 years? That’s fair then