The Interview questions are legit such solid content. This stuff is invaluable to someone like myself trying to prepare for interviews, I think i have a really solid foundation but I get super super nervous when it comes to technical live coding questions. It's nice to have this to mentally prepare.
I'm in the same position as you, I think I have a solid foundation but the thing that I'm wondering about is that would this be a question for junior position in React cuz this was not easy to be honest.
@@anasazkoul4899 i can share my expirience with interview for react trainee position(i had no commercial experience so not even junior) first task was for week in advance, not live coding, just make app like pokedex which fetches pokemons from api, populates grid with them, has button load more which fetches more, and things like filter by pokemon element and show big card of pokemon when you click on it in actual interview there were many theoretical questions about html css js and only a bit of react, live coding was to stop child component(that had props being passed from parent) from rerendering extra times (simple solution to wrap component in React.memo) and extra question how to deal with same problem but if prop is array or object (wrap them into useMemo)
@@ky3ow wow thank you so much for sharing, it's really informative. I think I still need a bit of extra practice with memo, useMemo and useCallback but not really stressed about it that much. and Are you working as a Developer now? do you feel like you gained more experience?
@@anasazkoul4899 yeah its my first month as employed developer(its 3 month probation but i get paid so its like i'm just trainee). About feeling gaining experience, 1. its my first time communicating with backend so much, so i look into devtools network tab alot, not only checking what comes from back but also what payload i send 2. project is large, components are sometimes large, so i got used to utilize vscode ctrl+P shortcut(to navigate between files that can just be in totally different folders, or if i need to find where function is Declared i type @functionName in this prompt) 3. i've not really written very new code, but i refactored few very big class components into nicely organised smaller functional components, that felt like getting experience
@@ky3ow that sounds absolutely great I hope I can get my foot in the door the way you did. Now I'm planning to make my e-commerce full stack project and post it on my portfolio and it will be the first big project I will ever do by myself. I hope this will get employers' attention. The best of luck with your journey :D
O man your channel both stresses me out and makes me feel good at the same time, since i do improve by watching every video of yours. Even often i dont get some parts but still its very entertaining to watch you solving problems and explaining in a simple way. Like you would talk to your friend. Thanks
Top notch quality as always! I just can't shake the thought that it could be notably simplified by storing the "grid" values in a single array and letting CSS handle the actual grid.
Recent subscriber very nice content and to the point for any one starting his React journey. Trying these exercises and then see how you tackle the same problem from the perspective of a senior dev is always interesting to watch. Haven't watched the video yet, but sure I will learn something new.
I enjoy watching your process! I recently had a React interview where the technical question was to create a street traffic controller that cycles through 6 phases of lights (north/south goes from green/yellow/red, then east/west does the same, repeat). It was pretty fun! I'm sure you could have aced it. Thanks for the upload.
People mad at the titles should just leave UA-cam because that’s how the algorithm works now haha. I love this content for learning. Feels more real than random leetcode problems. Making it a game makes it 100x better to learn as well.
Thank you so much for this really beneficial content. I need to sit down and do this myself after having watched the video. and I just wanted to say that I'm really amazed with how you can tackle a problem with such relaxed manner and clear thinking.
There is some editing going on in this videos, so don’t think I’m a coding guru 😂 , but yeah these are fun challenges, good to understand how to do yourself
omg this is awesome ! the way you explain it and the way you think of problems and how to solve it. I paused at some scenes to push myself to think about it a bit before you make the solution. btw how many years are you working as a developer ? I'm working as a front-end developer for like 3 years now and by watching your videos I realize how much I need to change my perspectives rather than my knowledge of stacks. wrapping up I really enjoy your work thanks for sharing this stuff with us. love from Iran ♥
Not sure if someone mentioned it already, but please don't use onClick listeners on non-interactive elements (divs, spans, ...), use a instead. This greatly improves a11y and UX (e.g. native keyboard-only support)
28:25 if we need DOM to update right after we setRevealedGrid, i think we can wrap it in flushSync, i think its easiest way instead of weird trick with setTimeout on hasWon(probably can achieve same with effects, but can't tell right away)
@@WebDevCody it could be a interview or a tech discussion something to get people from the tech space to share new ideas, tech or just stuff you’d find interesting.
I'm not sure tbh, but i think you took it to a whole other level, why haven't you thought of implementing some conditional rendering? 2 set of states, hide/reveal ? Does that make sense? Great one btw, i appreciate your immense efforts!
@@WebDevCody I'll try to explain it a bit, hopefully none of us get confused xD What i meant is instead of repeating the [] itself, while didn't you simply re render the values, based on the hide/reveal bool states. like a card has 2 sides right? like a flip, but that would change the whole structure i guess
@@hymndrazill ahh yeah idk there are a lot of ways to solve this problem. If I redid this I would have only used a single 1d array to solve this problem. It’s hard to say what solution is the best, as long as you solve the problem you should be ok
Using a 2D Array to contain the data to show rows/columns rather than just using a flat array and CSS Grid with for styling it into a grid seems an odd choice?
What you do in thirty minutes, takes me three hours. Geez, I'll never get through an interview challenge like this in time. Great learning experience though, thank you. I think one thing you can do to simplify is just mapping through the grid like so: const clearSelected = () => grid.map(r => r.map(c => false)). Make sense?
I find your github project layout, specifically the repo associated with your youtube code, very interesting! I'm curious as to how to go about setting up something like that.
Not sure if I'm alone with this. But if I have a fixed row or column length, I think using a single array is better than a 2 dimensional one. Because for one, you only need one map() call And second, you can style it with column grid template and or flex box easy.
I have been trying to come up with a solution for this by myself for the past week and its been hard, is this challenge above the junior developers' ability?
In react if we decide to not to specify the key, react by default will use index as the key I think, we don’t need to specify the key if we are going to use index as the key. Correct me if my understanding is wrong.
Isn't it like easier to make an array of objects. And with the object the fields are turned, solved and number. So when the number is the same as another number both objects are set to solved and will be out of the array. And when the user clicks on 2 objects both fields turned are true and when its both wrong they both will go to turned: false again.
ill use array of objects for state which will have the key to the other object and another array with the key if objects. ill add the key to they array if the guess was right and boom.
handleCardClicked() should only update the state and then use useEffect( () => { ..your side effects here }, [previousClick] ); to add any side effects to your state updates :) imo, that would be way cleaner way to do it
Why are all your old videos showing only 360p quality? The only other quality option is 1080p Premium (requires UA-cam premium). Can you look into this? All the code is pixelated making all such old yet timeless videos unwatchable :(
It shows "1080p Enhanced Bitrate" (on these React interview playlist atleast) but that's only available for premium users. The only other option usable is 360p. No other available even. On recent videos, the standard 1080p is still there
Dude I like your style of teaching but you really push yourself off-grid and the viewers at times 😑 just slow down a little, we know you're the man here 🙄
The Interview questions are legit such solid content. This stuff is invaluable to someone like myself trying to prepare for interviews, I think i have a really solid foundation but I get super super nervous when it comes to technical live coding questions. It's nice to have this to mentally prepare.
I'm in the same position as you, I think I have a solid foundation but the thing that I'm wondering about is that would this be a question for junior position in React cuz this was not easy to be honest.
@@anasazkoul4899 i can share my expirience with interview for react trainee position(i had no commercial experience so not even junior)
first task was for week in advance, not live coding, just make app like pokedex which fetches pokemons from api, populates grid with them, has button load more which fetches more, and things like filter by pokemon element and show big card of pokemon when you click on it
in actual interview there were many theoretical questions about html css js and only a bit of react, live coding was to stop child component(that had props being passed from parent) from rerendering extra times (simple solution to wrap component in React.memo)
and extra question how to deal with same problem but if prop is array or object (wrap them into useMemo)
@@ky3ow wow thank you so much for sharing, it's really informative. I think I still need a bit of extra practice with memo, useMemo and useCallback but not really stressed about it that much. and Are you working as a Developer now? do you feel like you gained more experience?
@@anasazkoul4899 yeah its my first month as employed developer(its 3 month probation but i get paid so its like i'm just trainee). About feeling gaining experience, 1. its my first time communicating with backend so much, so i look into devtools network tab alot, not only checking what comes from back but also what payload i send 2. project is large, components are sometimes large, so i got used to utilize vscode ctrl+P shortcut(to navigate between files that can just be in totally different folders, or if i need to find where function is Declared i type @functionName in this prompt) 3. i've not really written very new code, but i refactored few very big class components into nicely organised smaller functional components, that felt like getting experience
@@ky3ow that sounds absolutely great I hope I can get my foot in the door the way you did. Now I'm planning to make my e-commerce full stack project and post it on my portfolio and it will be the first big project I will ever do by myself. I hope this will get employers' attention. The best of luck with your journey :D
O man your channel both stresses me out and makes me feel good at the same time, since i do improve by watching every video of yours. Even often i dont get some parts but still its very entertaining to watch you solving problems and explaining in a simple way. Like you would talk to your friend. Thanks
Top notch quality as always! I just can't shake the thought that it could be notably simplified by storing the "grid" values in a single array and letting CSS handle the actual grid.
Recent subscriber very nice content and to the point for any one starting his React journey. Trying these exercises and then see how you tackle the same problem from the perspective of a senior dev is always interesting to watch. Haven't watched the video yet, but sure I will learn something new.
I enjoy watching your process! I recently had a React interview where the technical question was to create a street traffic controller that cycles through 6 phases of lights (north/south goes from green/yellow/red, then east/west does the same, repeat). It was pretty fun! I'm sure you could have aced it. Thanks for the upload.
That’s a cool idea I may do that one if I understand what you mean
I really appreciate the live vibe and honesty good job bro
People mad at the titles should just leave UA-cam because that’s how the algorithm works now haha.
I love this content for learning. Feels more real than random leetcode problems.
Making it a game makes it 100x better to learn as well.
Thank you so much for this really beneficial content. I need to sit down and do this myself after having watched the video. and I just wanted to say that I'm really amazed with how you can tackle a problem with such relaxed manner and clear thinking.
There is some editing going on in this videos, so don’t think I’m a coding guru 😂 , but yeah these are fun challenges, good to understand how to do yourself
omg this is awesome ! the way you explain it and the way you think of problems and how to solve it. I paused at some scenes to push myself to think about it a bit before you make the solution. btw how many years are you working as a developer ? I'm working as a front-end developer for like 3 years now and by watching your videos I realize how much I need to change my perspectives rather than my knowledge of stacks. wrapping up I really enjoy your work thanks for sharing this stuff with us. love from Iran ♥
I’ve been coding in the industry for maybe 10 years now. Glad you like my videos!
Man thank you! I'm currently a student and i atleast wanted to learn every single language out there atleast the fundamentals before i graduate
Not sure if someone mentioned it already, but please don't use onClick listeners on non-interactive elements (divs, spans, ...), use a instead. This greatly improves a11y and UX (e.g. native keyboard-only support)
28:25 if we need DOM to update right after we setRevealedGrid, i think we can wrap it in flushSync, i think its easiest way instead of weird trick with setTimeout on hasWon(probably can achieve same with effects, but can't tell right away)
oh nice thanks for the info. I think I remember reading about that once but I've never used it before. This is probably a good scenario to use it
I do not have the memory nor the brain to do this. Thank you for inspiring me to give up
Don’t give up
That's beautiful!
Yes! I so love this kind of content
Would you ever consider interviewing / talking with other tech people for a video ?
Possibly, as in I’d interview someone?
@@WebDevCody it could be a interview or a tech discussion something to get people from the tech space to share new ideas, tech or just stuff you’d find interesting.
@@yousafwazir3167 oh, maybe one day. I do plan to do a collab with another youtuber Sunday to learn some new things
lol I wish interview projects were this straight-forward
I'm not sure tbh, but i think you took it to a whole other level, why haven't you thought of implementing some conditional rendering? 2 set of states, hide/reveal ? Does that make sense? Great one btw, i appreciate your immense efforts!
Not sure exactly what you mean but thanks for watching! I thought i did conditional rendering in this video?
@@WebDevCody I'll try to explain it a bit, hopefully none of us get confused xD
What i meant is instead of repeating the [] itself, while didn't you simply re render the values, based on the hide/reveal bool states. like a card has 2 sides right? like a flip, but that would change the whole structure i guess
@@hymndrazill ahh yeah idk there are a lot of ways to solve this problem. If I redid this I would have only used a single 1d array to solve this problem. It’s hard to say what solution is the best, as long as you solve the problem you should be ok
@@WebDevCody indeed! Overall thank you, just wanted to share a thought! see ya in the next one, soon enough hopefully haha
Love these type of videos 🤩
Interview questions like that are for Junior Dev ??
Using a 2D Array to contain the data to show rows/columns rather than just using a flat array and CSS Grid with for styling it into a grid seems an odd choice?
Sure?
And this pseudo code also helps copilot by a lot. :D
Although it's already very strong.
I'm always prematurely optimizing 😂
What you do in thirty minutes, takes me three hours. Geez, I'll never get through an interview challenge like this in time. Great learning experience though, thank you. I think one thing you can do to simplify is just mapping through the grid like so: const clearSelected = () => grid.map(r => r.map(c => false)). Make sense?
Bro, the closing div should have a slash in it 4:47
I find your github project layout, specifically the repo associated with your youtube code, very interesting! I'm curious as to how to go about setting up something like that.
I just make one repo and put a sub directory for each project
will you do something for seniors?
Seniors probably don’t get these type of challenges
Not sure if I'm alone with this.
But if I have a fixed row or column length, I think using a single array is better than a 2 dimensional one.
Because for one, you only need one map() call
And second, you can style it with column grid template and or flex box easy.
I think that would work well, I didn’t think of that
Thats what they recommend in the react docs, they say to avoid nesting and use flatened objs instead
Is there a good reason for not using a 1-D array and use flex wrap ?
Nope that would work
superb content...!
I have been trying to come up with a solution for this by myself for the past week and its been hard, is this challenge above the junior developers' ability?
In react if we decide to not to specify the key, react by default will use index as the key I think, we don’t need to specify the key if we are going to use index as the key. Correct me if my understanding is wrong.
Yeah that is correct. I just like to explicitly set it
Amazing quality content, learning a lot. One thing I would personally ask is more Vue3 content.
Does"t it have a bug when you click fast on everywhere?
Idk didn’t check
Isn't it like easier to make an array of objects. And with the object the fields are turned, solved and number. So when the number is the same as another number both objects are set to solved and will be out of the array. And when the user clicks on 2 objects both fields turned are true and when its both wrong they both will go to turned: false again.
Easier is subjective, but sure that’ll solve the problem just the same
ill use array of objects for state which will have the key to the other object and another array with the key if objects. ill add the key to they array if the guess was right and boom.
Watching these even tho i applied to over 500 jobs and none have given me something like this. Its all hard leetcode im applying for front end :(
That sucks, leet code questions are not very practical, but still challenging. I’d rather be quizzed on something practical
can you/anyone make a playlist off all react interview challenges from this channel. it will be very helpful
Have you considered doing live interviews like this with random people? "fake job interview"
Yes, very good idea!!
24:00
handleCardClicked() should only update the state and then use useEffect( () => { ..your side effects here }, [previousClick] ); to add any side effects to your state updates :) imo, that would be way cleaner way to do it
Sounds interesting, but I disagree. UseEffect makes the code harder to follow imo.
WOW
Good job babe!!!!
Thanks bub!
Why are all your old videos showing only 360p quality?
The only other quality option is 1080p Premium (requires UA-cam premium).
Can you look into this? All the code is pixelated making all such old yet timeless videos unwatchable :(
Hmmm I’m not sure I can try to look into it. On my end it says HD
It shows "1080p Enhanced Bitrate" (on these React interview playlist atleast) but that's only available for premium users. The only other option usable is 360p. No other available even.
On recent videos, the standard 1080p is still there
Dude I like your style of teaching but you really push yourself off-grid and the viewers at times 😑 just slow down a little, we know you're the man here 🙄
Sorry about that!
You need to explain all syntax for beginners. This is nowhere near beginners level. Being so advanced you are out of touch.
He never said that the content is meant for junior developers
Yeah this isn’t a challenge for someone who doesn’t even understand JavaScript and react syntax
So rude for no reason
Its literally in the title " *more* challenging", go to his simpler challenges if you need more of a basic challenge/tutorial.
Yeah let me waste a year of my life learning about specific function names so I can build some basic UI.