A subscriber sent me a junior react interview challenge, let's solve it
Vložit
- čas přidán 5. 07. 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
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.
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 CZcams 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.
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!
It was a great challenge and I found it very interesting to do it and review your solution and explanation. Please more of these 😊
please more content like this... easier ones harder ones... as long as they are junior interview challenges. Thanks!
Thanks for the walkthrough. I have been wanting to go back to react and it helped me revise a lot of things! :)
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.
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)
I just completed this task before watching your solution.
Great challenge!
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
Great video bro learned a lot, I did a slightly different implementation, but the video really helped me in the overall idea
Thank you so much for sharing these kind of contents
@Web Dev Cody superb content...please keep on uploading more such Coding Challenge Videos on React..they are asked a lot during interviews.
Awesome content. Thank you!!
More of this please. Thanks
i got a challenge similar to you did few days ago (langchain story mode) btw great video.
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! 😅
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
It's super interesting to see you live solving problems like that ! If you want to do more "complex" stuff that'd amazing too
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
Next challenge; create a custom translation library using redux / context
Could the button have been changed to a Checkbox? It functions like a checkbox.
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.
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!
made so much complex , its a easy task
What colorscheme is that in your vscode? Looks nice
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.
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
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
This question is really simple in plain HTML + Javascript. In react I have no clue :D
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
More like this type of problems, Thanks.
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');`
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
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
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)
would that be a live coding or you can do it without someone watching you?
Can you post the full question somewhere?
great stufff
Left me dazed and confused haha
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 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
Please do more of this
what happens if you click a button again after it turns blue?
its not the simples task for a junior, i got stuck on removing the buttons if corrected options are clicked
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
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()`
Does anyone know of a site or resources with examples tests like this? not like leetcode etc!
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!
Bro where can we get u vs code theme colors and plugins? Thanks man ❤
Bearded theme stained blue, and bearded icons
an enum of the possible states would be nice
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
what theme do you use?
I think you could do this Object.entries(data).flat() instead of spreading arrays
26:10 you could use a switch statement either!
just return option.state.toLowerCase() :D
this is very easy in javascript, the solution presented is complex looking,
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.
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.
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
TypeScript made this more complicated than it should have been.
I am against picking the requirements one by one and I would prefer looking the whole requirements and come up with single design
What theme are you using?
bearded theme stained blue
whats ur vs code theme looks awsome
can you share your theme? thanks
The only this this taught me is how antiquated React really is
Awesome tutorial! can you share what vs theme that is?🙏
bearded theme stained blue
Thanks a mill @@WebDevCody
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].
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
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
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.
pls do a setup reveal video/tour
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
I wonder why not make the buttons their own components? To keep the state more clean overall.
What is your vs code theme name
bearded theme stained blue
What theme is that?
Did he mention the pay?
Anyone know what vsc theme this is?
bearded theme stained blue
I feel like coding web dev is like go learn HTML CSS then JS now forget everything and use react
Wait actually I'm able to solve that with my knowledge without googling, unfortunately I still haven't got a dev job 😅
how mutch time did he have
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.
I am a bit scared. Do they really ask such questions to Junior dev?
I guess some places do 🤷
Can you post the intro text in the comments please?
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?
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?
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
Took me like 2 hours, guess Im rusty
damn react seems so hackish when your used to vue
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?
If you can't solve this you're not ready to become a junior developer, this is easy as fuck lol
A lil aggressive there, but yeah this problem isn’t too bad
Ohhh mr Brilliant is in the town. Be careful, because the shine of your balls will blind all of the greatness in you, and who is gonna be the best programmer?
The whole video he added one comment to the code... and then deleted it lol
Comments are a code smell anyway
C'mon guys, this is not Junior interview challenge. I am experienced dev and I think this is exaggeration.