Here is a more challenging react interview exercise
VloĆŸit
- Äas pĆidĂĄn 14. 11. 2022
- đŹ Discord / discord
đ Newsletter eepurl.com/hnderP
đ. GitHub github.com/codyseibert
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
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
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.
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.
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
Love these type of videos đ€©
I really appreciate the live vibe and honesty good job bro
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
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!
Yes! I so love this kind of content
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
superb content...!
That's beautiful!
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)
Amazing quality content, learning a lot. One thing I would personally ask is more Vue3 content.
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?
People mad at the titles should just leave CZcams 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.
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
I'm always prematurely optimizing đ
And this pseudo code also helps copilot by a lot. :D
Although it's already very strong.
I do not have the memory nor the brain to do this. Thank you for inspiring me to give up
Donât give up
Good job babe!!!!
Thanks bub!
Is there a good reason for not using a 1-D array and use flex wrap ?
Nope that would work
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?
lol I wish interview projects were this straight-forward
Interview questions like that are for Junior Dev ??
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
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
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
can you/anyone make a playlist off all react interview challenges from this channel. it will be very helpful
Bro, the closing div should have a slash in it 4:47
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.
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
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?
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
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.
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
Does"t it have a bug when you click fast on everywhere?
Idk didnât check
WOW
will you do something for seniors?
Seniors probably donât get these type of challenges
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
Have you considered doing live interviews like this with random people? "fake job interview"
Yes, very good idea!!
24:00
If you have tons of errors, donât read them, just delete everything and start over. đđđ
Sometimes itâs easier than reading these aweful error messages
Why are all your old videos showing only 360p quality?
The only other quality option is 1080p Premium (requires CZcams 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!
Yeah let me waste a year of my life learning about specific function names so I can build some basic UI.
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.