React Junior Developer Interview (Questions & Challenge)
ฝัง
- เผยแพร่เมื่อ 22 พ.ย. 2024
- 🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
Join The Discord! → discord.cosden...
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!
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](http://i.ytimg.com/vi/U9sDK8zTJ8Y/mqdefault.jpg)
![[TH] 2024 PMGC League | Survival Stage วันที่ 1 | PUBG MOBILE Global Championship](http://i.ytimg.com/vi/FVFT-PFwU80/mqdefault.jpg)
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
I m looking for react developer job, I have more depth knowledge than him
My man, thanks to this interview I was prepared, a lot less stressed and I actually landed an internship! Thank you both for great work.
damn, congrats!
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
for real
I love how you teach and your approach. I wish Frontend Interviews were like this really
This was fantastic, and I would appreciate additional simulated interviews similar to this one, encompassing both the therotical and practical parts.
Thank you both and especially Bogdan for being brave to do this!
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'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!
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!
Excellent video, the interviewer explaining and giving insight of the issues and ways to work around them is perfect, great job both!
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 great. I'd love to see more mock interviews like this. Shout out to that kid for his attempt 👏 .
as someone trying to land my first Jr Role, this video is helpful. I appreciate both of you!
Did you got any job brother?
@@unwrittenshots 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?
@@unwrittenshots 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.
Would it not be better to just filter the list of capitals in state rather than make another API call? Handle locally what you can handle locally, no?
from my perspective, it seems that he's using the second call of filtering in the useEffect only because he has the filter api endpoint. If he didn’t have it, he should definitely use a js event to update the country
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.
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 :)
More of these please. This was awesome. Good job bogdan!
Thanks for giving me more confidence that if Bogdan has 4 YEO and was struggling with this level, I am surely gonna get selected
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!
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 😭
Kudos to him for making himself vulnerable. Good job!
This is fantastic! I thoroughly enjoy this type of content. Keep up the good work, @Cosden Solutions!
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.
I am in the same spot , self learning and hoping to switch careers.
Did you make it ? and if yes then how? 😅
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
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...
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.
As an interviewer, it is better to listen more. Don’t be nervous, you are doing great :) and it is still interesting to watch
Learn JavaScript well before learning TypeScript and ReactJS.
I love this. I hope you can do that with a senior.
Great educational video. Shout out to Bogdan. Thanks a lot!
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!
I would've loved to participate in an interview like that since there's a great shortage of real react interviews for junior devs. Thanks for the video, really educational
wish my interview looked like this
i had my first tech interview a few days ago, and i def haven't passed it
it was junior react position, but seems like the guy wanted me to know completely everything in deep about js methods..
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
Wow the useEffect solución at the end was great, very interesting aproach. I learnt a lot from this video thank you
Please make this kind of videos which are really helpful for freshers ❤
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!!"😂
lovely content, am a junior and I learnt alot, thanks 👍
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!
thank you so much for these react videos
Enjoyed watching this !
This is great content, I came here from your instagram page and would love to see another interview with advanced questions and senior developers.
Please do record more videos of these type..please it’s a humble request 🙏❤
This video was extremely useful to me. Thanks alot.
This is very helpful, thank you very much.
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)
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?
No pressure - JUST do your BEST.
I love it, lmao
Please make more such videos love this one.
great Interview, this interview really helps to prepare for the really one.
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
Great Mock Interview , Thanks
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
Need more interviews like thus
Came across your vedios, learnt alot my frien thanks❤❤❤
He said he haven't used anything, so is he really a React Developer or just HTML developer?
I loved the video, more like this please!
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!
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 :)
Great interview . Again amazing content bro ❤❤❤❤
eventhough it is fake, i learned much more
Amazing interview ........great questions .
This was terrific. Loved your knowledge drops during the interview. Is there any way we can get a copy of the code?
If only the real interview is this easy I would have been a junior react dev by now lmao
Great, I love it.
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.
I wish to have a intervew like this :)
I am confused. At 37.00
writing that fetch function outside of use effect like so..
let fetch = a sync () => {
// inside code whatever
};
use Effect(() => {
fetch();
}, [ ]);
Works good. So why did he say all that !!
It works but you get lint errors because fetchData has to go inside the dependency array. And if you do that, it will run the effect infinitely. By defining it inside the use effect you don't provide it to the dependency array and you don't have this issue
@@cosdensolutions in above code I haven’t provided it inside dependency array. Works. No console warnings too. I am new to react.
I'd love to be interviewed :D Great video, and a very good applicant :)
Let's take you interview
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 TH-cam? 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.
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 :)
3:44 We don't put JS in html. We put html in JS functions.
great video, but less code doesnt mean better code. Its important to have your code made for easy readability
amazing!!!
Which camera you guys use to record your video?
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 TH-cam 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
enjoy it
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
Without useRef, there's also a way with using an id and making dom manipulation with it to focus....
He did great....
I started learning react a month ago and i knew way more than thia guy.
❤❤❤
it was great , thx
I also want to do a react interview mockup with you. How could it be so??
Like seriously these kind of questions are enough for junio react developer interview?
Yeah what else would you want? 😅
i would have passed this hurrah
🤩
this is good interview and love it learn from it
Wth? No negativity here. But the guy giving mock interview is a freshie not an experienced dev of 2 years
More of this... Thanks
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
Hi, you are doing great. can i get a chance to to give you a mock interview on react?
I enjoyed it. Can you do more?
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
This bro, who's applying the interview..judging on his answers - I doubt that he can be even a junior react dev...not talking about the middle level...
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 love how at the end the interviewer became Super Saiyan lol
Hahahahaaha nice
where can I apply to do an interview with you?
Damn. I’ve been writing react for 4 years (strictly as a hobby) with 0 interaction with any other react devs. All these questions seemed so easy, yet here I am believing I’m the worst react dev ever 😅
My worst nightmare for interview dsa with react js...this one somewhat scary interview for me.
❤
they did a good job, but sure I guess its your friend