A subscriber sent me a junior react interview challenge, let's solve it
Вставка
- Опубліковано 20 лип 2024
- 00:00 - Introduction
01:23 - Building the Component and Passing Data
02:25 - Displaying Buttons for Each Country and Capital
03:51 - Randomizing the Array
05:11 - Setting Button Background Color to Blue
08:07 - Removing Buttons on Wrong Pair Selection
11:59 - Resetting Background Color and Buttons on Wrong Selection
16:45 - Checking if Game is Over
21:55 - Exporting the Component
26:33 - Refactoring and Code Cleanup
31:35 - Summary and Conclusion
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
✂️ Background Cutter: www.backgroundcutter.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
This kind of raw unplanned video format was so great instead of a polished precoded solution so some newbies could follow along with your thought process step by step. The problem might have been very easy but the cleanup and optimization was a golden nugget. Awesome content as usual
Thank you for walking through the problem and the solution instead of providing scripted solution
Love this live coding content! Also love that you explicitly made a point to talk a lot about re-factoring and writing clean code. Not nearly enough of that on UA-cam videos!
I am learning a lot from this video. I enjoyed following your thought process, its not only teaching us about js its also teaching us how to think. I think most of us are in tutorial hell because when we are given some task we dont know how to think to solve the task. Please do more of these and the refactoring videos.
As a beginner, this way of solving a problem is very insightful. I understood most of the logic even though I don't know TypeScript yet which made it slightly confusing at times. I'd love to see more videos like this. Thank you.
It was a great challenge and I found it very interesting to do it and review your solution and explanation. Please more of these 😊
Thanks for these code challenges. I love feeling stupid not being able to do them and then learning about these foundational underlying concepts, keep them coming!
please more content like this... easier ones harder ones... as long as they are junior interview challenges. Thanks!
this is like bob ross painting a barn overlooking a meadow. Nice. pls continue creating these types of videos. bob ross of junior level take home quizzes.thakns.
Thanks for the walkthrough. I have been wanting to go back to react and it helped me revise a lot of things! :)
Awesome content! One thing I would have done in a different way: in the getButtonClass you can either return option.state.toLowerCase() or use an object like {'SELECTED': 'selected', 'WRONG': 'wrong'} and then use option.state as the key like objectName[option.state] || '' (empty string if the key does not exist)
More of this please. Thanks
Great video bro learned a lot, I did a slightly different implementation, but the video really helped me in the overall idea
@Web Dev Cody superb content...please keep on uploading more such Coding Challenge Videos on React..they are asked a lot during interviews.
I just completed this task before watching your solution.
Great challenge!
i got a challenge similar to you did few days ago (langchain story mode) btw great video.
Thank you so much for sharing these kind of contents
Bruh lmao. There is no way in hell that a junior will know how to do this. I guess nowadays Junior means "has been making things with React for 5 years and finally landing his first interview".
Actually that's really easy task lol...It's the typescript which is actually making the code harder to understand
the fact that he did all in line was a little confusing, but overall wasn't that hard
This is a very easy challenge. Junior react interview challenges usually make you use some kind of API and error handling.
maybe the industry standards went up since you were a Junior cause thats not the hardest challenge a junior could get
If you cannot solve this, you don't know react
Awesome content. Thank you!!
I really enjoyed this and as others mentioned many times these live challenges are very valuable to see the full process of thinking and refactoring. Can you do a challenge please when instead of jumping straight into code spending some time with planning? Like what we need to implement, what kind of components, features, maybe packages, libraries. I really like React and TypeScript but am a total noob of planning a project.
I'm trying to do a project and I've done a fair bit of it and after a while it just gets messy with all the components and code.
The problem is I don’t plan my code. I let code evolve organically.
@@WebDevCody But you do plan bigger projects I guess?
@@bevik12 i usually plan complex features the project might need, but I never plan at the code level, only system level
I wish there was this type of content but for Python/backend and data engineering
Can you please share your vscode settings 😊
Edit: Please bring more videos like this, never even stop this series.
This video made me subscribe. More please! 😅
You could memoize that first sorted array to keep that first pattern, on a side note something that's wrong is that you're not using the previous values of the state, you'll run into sync issues
It's super interesting to see you live solving problems like that ! If you want to do more "complex" stuff that'd amazing too
Great content. Just have a little though over the UX part, in the game experience, it is not suggested to remove element that cause the element shifting. So my suggestion is instead of remove the paired option, we might want to give it a correct status, and when the button has correct status, its visibility will be hidden. so we maintain the same layout instead of shifting all the elements after pairing.
Next challenge; create a custom translation library using redux / context
How are these coding interviews normally set nowadays? The last one I did was a few years ago and I was able to take it home and put the end result in a github repo for them to access. I couldn't imagine doing something like this live with people watching over me!
Could the button have been changed to a Checkbox? It functions like a checkbox.
Great vid! Though I do question your preference to inline code when it is more than a few lines. Know you'll have to refactor so why not do it straight away.
I guess it's possible here to use only one state "options" and then find selected option like that `const selected = options.find(option => option.state === 'selected');`
made so much complex , its a easy task
there are not many countries, so it won't hurt, eat up the memory.... if you store both as keys and also as values... or just an "array" of some custom object type that has "pairs" and has some override for "equal" function where berlin is equal to berlin and also germany, then another function return it's pair that would return berlin for germany and germany for berlin... so you could still do some cool lambda expression on it...
or my first solution, you'd store both way country->capital and capital->country in same dictionary ...
also could store other data, like status... like for example:
key: Germany value: (pair: Berlin, status: selected) , could be same the other way key: Berlin value: (pair: Germany, status: selected) in the same dictionary...
it would be super easy to check when you click on Berlin if Germany is selected already, or if Berlin was selected, because it handles same way, you do not have to handle country and capital differently, think of this as X,Y coordinate of a symmetric object (symmetric in a way if x,y is part of the picture then y,x too, so basically symmetric to the y=x line)
Should I spend a few sessions a week solving these type of challenges? Or to get better at React just work on projects?
Def should
it doesn't hurt to try and solve these challenges, it'll just make you better at problem solving
How can we get more of these problems? @@WebDevCody
Great video. Just want to add when doing an coding challenge for an interview, make sure you write it like how you would at your job. I would extract the button, Types, constants to a separate file for reusability, write unit tests and add documentations
This question is really simple in plain HTML + Javascript. In react I have no clue :D
What colorscheme is that in your vscode? Looks nice
More like this type of problems, Thanks.
hello cody, i hope you read this because id be super grateful and thankful for the answer.
so, ive tried the challenge and i did it in my own way, but i kinda make my away around from some of the instruction. for example on point 1, the instruction only tell to put 1 prop. but i put 2 instead. my question is, is this acceptable or should i strictly stick to the instruction?
thankyou, really good video!
As a general idea, you should try to stick as close as possible to the instructions. The easiest way to solve this in a real scenario is simply to ask ; Making sure you understand PROPERLY what's asked of you and what is important and what isn't.
In this case, I'd say the wording is clear enough on what props your component should get so you should try to rewrite it; but in some cases, that's really not the focus of the exercise. Here, the idea behind having only one prop is also to check if you're able to make a component that properly meets the requirements of a spec, so if in a real situation you were asked to do a component taking [x] data, you'd be able to provide the component as is, without demanding the rest of the team to modify what data they're supposed to put in. A classic case would be refactoring a component that already exists, without making changes to the parent itself to keep the changes minimal. :)
i appreciate the answer, brother. thankyou! @@Dekharen
There is a problem. What happens if you have country that has the same capital name, such as {Singapore:'Singapore'}?
In that case clicking on one button will change background color of both buttons to blue.
I got that problem when I tried to solve this problem on my own and I believe that could be the case in your solution as well :D.
Is using ids instead of strings when comparing good enough?
@@majksuyes
This is easy... If you have a logical mind after watching single full course on a particular SPA framework (in this case React), this should be a piece of cake for you.
Can you post the full question somewhere?
If the junior dev gets all the answers correctly, they should be hired as an intermediate or even a senior dev, this is not easy.
and how many junior react devs are able to complete task like this on their own?
hopefully most 😀
Nope, most juniors would fail it. Reason is simple most juniors learn what's used the most so little bit of creativity needed here will defeat many of them. If that's good thing I dont know but it seems like bonus points kind of task for junior to do.
Hey chief, how do you get the underlined functions etc with the indentation - indent rainbow doesn't seem to do that by default?
I think there is a vscode option to highlight function blocks
@@WebDevCody aha! Yup, for anyone else: you're looking for 'Editor> Guides: Bracket Pairs and Bracket Pairs Horizontal
Left me dazed and confused haha
great stufff
I had this exact same interview question. I had to finish it within 30 minutes. It was so hard :(
how did I go? I tried to solve it before watching the video and its taking a while without using chatgp for straight answers 30 minutes seems impossible for me tbh
its not the simples task for a junior, i got stuck on removing the buttons if corrected options are clicked
I think you could do this Object.entries(data).flat() instead of spreading arrays
Should've used Object.entries instead of keys/values and then merging them together.
good suggestion, but you'd also need to flatten the nested arrays
@@WebDevCody I think @ivangechev4243 meant flatten would merge the list into an array ... `Object.entries(data).flat()`
Please do more of this
Couldn't we just use a useEffect that would sort the array only the first time the component mounts?
Yes
Hi, as a more advanced React dev - in this small project you could do that, but if you are making some complex or hard-render component, the lifecycle with useEffect would be: initialize useStates, hooks etc, render the return statement (component), fire useEffect that would randomize (sort) the array and then it would render the return statement again.
The more correct way, if you really want to use useEffect would be useLayoutEffect. But here you still have two steps - first is initialization of useState and then setting it.
Cody did it the most correct way where he put it in initial function setter of useState. It has the most potential to not fk up something.
this is very easy in javascript, the solution presented is complex looking,
I hope you know this, but .sort(() => Math.random() - 0.5) is a HORRIBLE choice for shuffling an array... You really shouldn't use that in an interview.
There's a 20% - 30% chance (depending on index) for each element to just stay at it's original spot. Because (assuming it's using Insert Sort, which most browsers use for small lists) when the "Math.random() - 0.5" is negative, the element moves up a spot, but if it's then positive the next time, the element will be moved down a spot, which puts it back to where it started.
That means it's also very unlikely for an element at the start of the list to end up at the end of the list, because "Math.random() - 0.5" would need to be positive n times in a row for the element to move up a spot each time.
Given [1,2,3,4,5,6], these are the chances for each number to end up at index [0]: 1 = 29.19%, 2 = 29.53%, 3 = 20.06%, 4 = 11.91%, 5 = 5.99%, 6 = 3.32%.
So yeah, as you can see, that can't be called "random".
A good method for randomizing that array would be
.map(value => ({ value, sort: Math.random() }))
.sort((a, b) => a.sort - b.sort)
.map(({ value }) => value)
Good idea!
Does anyone know of a site or resources with examples tests like this? not like leetcode etc!
would that be a live coding or you can do it without someone watching you?
I am against picking the requirements one by one and I would prefer looking the whole requirements and come up with single design
an enum of the possible states would be nice
what happens if you click a button again after it turns blue?
Can you give me the challenge description? I have solved it too before watching the video and I wanted to put the description on the repo readme
When multiple buttons are colored blue when you click on them, wouldn't give them a key solve that?
I don’t see how, you’d want to track the state of the button to know if it’s selected or not, not a key
26:10 you could use a switch statement either!
just return option.state.toLowerCase() :D
Looking at this, I don't get the selling point over using straight jQuery. It needs to be more declarative and have less branching. What you can do is use computed values... Have an array with the selected buttons and then you can easily test if it's wrong. like `const isWrong = isFilled && !isPair(values, selected[0], selected[1]);` But given the time constraints of the interview, you can't iterate enough to see cleaner solutions
Actually this isn’t the worst challenge project… I would accept this challenge for a junior position I can do this and I’ve done React for little over a year
Bro where can we get u vs code theme colors and plugins? Thanks man ❤
Bearded theme stained blue, and bearded icons
TypeScript made this more complicated than it should have been.
2:55 why not use `const [countries, capitals] = Object.entries(data); ?
That would work as well
Because it doesn't work.
.entries() groups the keys with their values. That's not what we need here.
const data = {germany: "berlin", england: "london"};
const [countries, capitals] = Object.entries(data);
console.log(countries);
Prints [Germany, Berlin]. But I wanted [Germany, England].
Awesome tutorial! can you share what vs theme that is?🙏
bearded theme stained blue
Thanks a mill @@WebDevCody
No way i will need to go through this :( maybe this is why im not getting any interview 😢
work on more projects to improve yourself, because that challenge was not very hard
I think it could be challenging for a junior
@@WebDevCody i mean the fact that you just speedrun through the challenge while i stop the video at every question for literally 10 minutes is crazy tho lol
I wonder why not make the buttons their own components? To keep the state more clean overall.
The only this this taught me is how antiquated React really is
Maybe you’re not introducing concepts like flattening control structures (by not using if else and else when you return as you go anyway) or using useState’s functional state update (with previousState passed into it) for setOptions, due to wanting to keep it simple for beginners - but I feel like it might also teach some beginners bad patterns from the getgo..?
Yeah that’s probably a good idea
what theme do you use?
whats ur vs code theme looks awsome
can you share your theme? thanks
pls do a setup reveal video/tour
What theme are you using?
bearded theme stained blue
Did he mention the pay?
Anyone know what vsc theme this is?
bearded theme stained blue
Wait actually I'm able to solve that with my knowledge without googling, unfortunately I still haven't got a dev job 😅
What is your vs code theme name
bearded theme stained blue
how mutch time did he have
What theme is that?
I feel like coding web dev is like go learn HTML CSS then JS now forget everything and use react
Which vscode theme is this?
bearded theme stained blue
Is this seriously a junior role interview? cos eiii
Sorry, but the junior challenges I know, were more like building a CRUD app like a "To Do List" or a "Tic tac toe" game. This is way more I have ever seen. Could also depend on the country, I don't know.
Can you post the intro text in the comments please?
I am a bit scared. Do they really ask such questions to Junior dev?
I guess some places do 🤷
it seems you are making this look way harder than it actually is by making this into an inline mess. Because otherwise it should absolutely be within a junior's reach.
inline vs external functions wouldn't have made a difference. extracting a function to not be inline involves just moving parameters around
I'm never gonna get a job...
Keep practicing
Kids, don't be like Cody. Don't shorthand and inline everything.
Make a function or two. Keep your code readable. Minifiers come after you code.
Did you know there is a way to collapse functions in the ide?
Seeing this makes me realise how much better Solid is than React. It's a shame people are going to keep using React for a long time still.
Theres a reason why all the top framework people are copying Solids ideas, Svelte just the latest.
What would be easier in Solid?
damn react seems so hackish when your used to vue
Took me like 2 hours, guess Im rusty
C'mon guys, this is not Junior interview challenge. I am experienced dev and I think this is exaggeration.
edit: the following is not correct. see comment further down
-------------------------
There is absolutely no reason to substract that 0.5 from the math.random to shuffle the list. Will do the exact same without.
I’d need to double check that. I specifically remember needing to do that once in the past
@@WebDevCody I just tried it and actually we were both wrong, it is not working correctly in any case. You are right in that sense that without -0.5 nothing will happen at all. The problem is that the solution you are giving is not a random distribution. For example in a list of 10 items, the first element will stay the first element with a chance of ~20% (the chance to be 1st should be 10% for every button if there are 10 buttons). I test this with a simulation / test:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
let counter = {}
for (number of array) {
counter[number] = 0
}
function createRandomArray() {
let innerArray = [...array]
return innerArray.sort((a, b) => Math.random() - 0.5)
}
for (let i = 0; i < 1000; i++) {
for (let i = 0; i < 1000; i++) {
let array = createRandomArray();
counter[array[0]] += 1
}}
console.log(counter)
I don't want to be mean and i don't know if it's on purpose, but this code looks pretty bad to me imho. The architecture is bad, hence the readability is bad. The only ds used is an array which as bad lookup complexity so the code is inneficient.
Also it is clear that the problem was not thought out beforehand...
Maybe i put the bar too high but that would de a fail for me :/
what architecture would you have done?
You cut out clips of you looking things up
For these challenge problems I try not to look anything up. But yes all my videos are edited to cut out boring parts
The whole video he added one comment to the code... and then deleted it lol
Comments are a code smell anyway