I loved solving this junior react interview challenge
VloĆŸit
- Äas pĆidĂĄn 5. 07. 2024
- đŹ 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
Here's all the X/Y positions (that I know of) in a mouse event, for anyone curious:
clientX/Y: 0,0 is top left of the browser window (under the toolbar/bookmarks bar)
offsetX/Y: 0,0 is top left of clicked element
screenX/Y: 0,0 is top left of monitor/display
pageX/Y: 0,0 is top left of page content, including scroll
I only know these because of a personal project I've been playing around with where I needed to track the mouse position as it moved over several elements.
This is going into my notes, I'll steal it
all these videos solving problems from interviews and teachings on how to think logically and handle errors, debugging... problems in real time (how to face them) ,
not a perfect video teaching without going "off script"...
and the way you explain... is gold, a large part of future developers will be very grateful to you
I have been working on a production react app for 2 years now. I enjoy watching these junior react interview questions to gauge if I am progressing properly
Great point. Iâm in a similar situation. I did 1.5 years in one ongoing production app, which meant I didnât have to do any set up of apps or different code to what I was mostly used to. So these type of challenges are great to see. It forces you to think a bit differently and see how your problem solving changes.
Props for including all the process (not only stuff that works but the mistakes along the way). Always super helpful!
These exercises are relieving. I think I've had way too big expectations of what a junior dev should know and it's been stressing me out haha. A little bit of self-confidence restored.
You're a great at teaching :)
Your explanations with things as you write your code, is like you know exactly what we need to hone in our attention to and retain as if we're prepping for upcoming interviews. Well, that is the point right! đ Thanks WDJ!
Hey Cody, another great video. It's great to see your thought process and how you tackle a problem.
Thanks again! After hard days work seeing these challenges being uploaded is amazing. What differs your from other courses is you do not provide a "path" to take before starting the project. Everything comes from your stream of consciousness. I often see many courses that first tell us what are they going to do such as "we need this component which will do this, then that component" before the video starts it is so easy to get overwhelmed, but with your videos, especially these challenges, there is a certain mystery going on and you let us also think before you do! It is an amazing experience, please keep them coming!
Glad to hear it! Yeah thatâs the vibe Iâm going for on my videos. Yâall just watch me figure it out and I show you my exact personal problem solving & work process along the way.
I couldnât agree more, well said
Just wanted to say I appreciated you saying which parts we weren't absolutely expected to master as juniors. As someone who's about to graduate, it's really encouraging to hear they don't expect you to know absolutely everything about a framework/language.
I mean, I personally wouldn't care, but other companies seem to quiz on a lot more stuff
Nice videos dude keep it up, you're the only person I've seen who actually showed what the "average day in web dev's life" is like with no bs, I also like videos like these, I even made a color guessing game myself after I saw your video about it. Also I think it's good to know for people watching, the reason your points on the screen seemed a bit offset, is because you put the letter "o" as the content of the point, which has a line-height and you can even see it when you selected all of them, so really it was putting all the points exactly where you clicked, but because it puts the top-left corner of the point on your cursor and it has a line-height, it seems off. Although even if it was a div from the beginning you'd still have to do something about the offset, but only in terms of CSS and not actually change its position on the screen. But please continue making these videos, they're very helpful and give me some motivation and I'm sure many others watching.
Very interesting problem. However, I believe you forgot an edge case. I believe your redo button doesn't have the expected behaviour.
If you place a circle, undo, then place a new circle, your redo button will be active and place the first circle back on the DOM. This is not usual for a redo button. The expected behaviour is that the redo button does nothing (well, it is the behaviour that I would expect)
This can easily be fixed by setting the `popped` array to an empty array whenever a new circle is created.
Good point. Yeah testing for edge cases like this would be good to remember to do in a real interview session just to show youâre thinking of different scenarios
forgot about that too and your solution was simple and brilliant.
I'm currently in university and I feel like I'm forgetting a bit of react (been busy with school stuff) but watching this video really refreshed my memory... I'll definitely watch more
Thank you so much sir
thanks for always re-explaining beginner concepts, love u bro
Kinda glad I watched this! I've always avoided these type of videos because I worry that I will watch them and have absolutely no idea how to do the task. I've been using react for a few years now and this task is quite simple. I guess I should work more on my self confidence than my React knowledge...
Thank You for your advice. I'm not a dev yet, but people who post this kind of video, make me feel calm about my first job interviews.
I've been enjoying these challenges keep them coming!
So cool ! at first I was like, hmmm that should be easy but there are many stuff to handle that makes (or could make) it more difficult ! Thanks for sharing
More videos like this please, thanks for the work you've put into it, as a beginner to React, it helps a lot :D
I know this is an old video, but I wanted to share my approach to the undo/redo functionality that takes a slightly different path from using separate points and popped arrays. Inspired by the concept of a "window" into our history of actions, my solution revolves around a single history array of all click positions ({x, y}) and a pointer that tracks our current position within this history.
Here's a brief overview of how it works:
Adding a Dot: When the user clicks to add a dot, we slice the history array up to the current pointer position and append the new dot. This ensures that if we're "in the past" (i.e., after having undone some actions), any new action effectively overwrites the future we've stepped back from.
Undo and Redo: The undo and redo functionalities are simply about moving the pointer back or forward, respectively. The pointer tells us how much of the history is currently "active" or should be considered in rendering the dots.
Clear: To start over, the clear function resets both the history array and the pointer.
This approach offers an elegant solution by maintaining a single source of truth for the actions history and a pointer to navigate through this history. It streamlines the logic by eliminating the need for managing a separate "redo" stack, as the future actions are not discarded until a new action is taken after undoing.
By using useMemo to compute filteredHistory based on the pointer, we efficiently render only the relevant subset of actions, making the undo/redo operations feel instantaneous, regardless of the history size.
I believe this method provides a clean, understandable, and efficient way to handle undo/redo functionality in React apps, especially in scenarios where actions are linear and can be captured in a single array.
Here's a snippet showing the core functionality:
import { useMemo, useState } from "react";
import "./App.css";
// When user clicks
// - display dot
// - replace history with current slice + new click
// Undo/Redo
// Store history of clicks
// Use array for history of all positions(x,y) with pointer to current index
//
// On undo move pointer back - 1
// On redo move pointer forward + 1
type Pos = {
x: number,
y: number
}
function App() {
const [history, setHistory] = useState([])
const [pointer, setPointer] = useState(0)
const filteredHistory = useMemo(() => history.slice(0, pointer), [history, pointer])
function addPoint(e: React.MouseEvent) {
setHistory([...filteredHistory, {
x: e.clientX,
y: e.clientY
}])
setPointer(prev => prev + 1)
}
function clear(e: React.MouseEvent) {
e.stopPropagation()
setHistory([])
setPointer(0)
}
function undo(e: React.MouseEvent) {
e.stopPropagation()
setPointer(prev => Math.max(prev - 1, 0))
}
function redo(e: React.MouseEvent) {
e.stopPropagation()
setPointer(prev => Math.min( prev + 1, history.length))
}
return (
Clear
Undo
Redo
{filteredHistory.map((pos, i) => (
{i + 1}
))}
);
}
export default App;
I've saved this video in watch later, now I'm doing this challenge, I just started learning Svelte so I decided to make it with Svelte. Now I came back to watch the video, thank you for this challenge it really helped me.
I used an event listener which I instantiated in an empty-arrayed useEffect, but using the onClick method of a div is way easier! Really cool!
for future refernce, the reason the circles were offset and not directly on your mouse is because when you click you place the top left of the div on the mouse position, the fix would be to give the .point class a set width and height in px and subtract half of that from clientX and clientY before making a new point
I just did a transform: translate(-50%,-50%) on them :D
â@@huge_letters best way honestly đ, learned it from Kevin few year ago
Sometimes a good typescript shortcut, is just hovering over the onclick event prop and it will show you what the event type is
Nice Iâll need to keep that in mind
When I see this as senior front-end dev I just smile, with things I struggled in my early days.
Super cool walkthrough. I've been working with react for a year or so and I never really bothered to dive into the react profiler (I only use it for Formik forms that are bugging), didn't know you could watch state updates I'll definitely take a look at everything it offers :)
Only thing I'd add is I think to prevent weird interactions, handlePlaceCircle should also setPopped([ ]) to avoid replacing old circles after doing a new action. At least that's how the vast majority of softwares with undo/redo work.
A better way to hold state is to hold points just like you were, but then hold undoSteps. Undo button increments, redo button decrements. Then during render you points.slice(0, -undoSteps). Whenever you add a new point, you commit the sliced points, then reset undoSteps to 0.
Nice, I like that as well
Great video! Where do you come up with these junior dev interview tasks? Is there some sort of site you can reference?
I just make them up lol
I love tutorials like this where you say out loud your thought process. Thank you, sir. I just subscribed.
Fun one! Solved in about 10 minutes or so but instead did it with and .
đ nice work!
Great video! Few things I would change personally, but doesn't make much difference.
- Use self-closing instead of when mapping over elements.
- When settings state such as setVariable([...variable, {x, y}]) instead use a callback eg: setVariable(v => [...v, {x, y}])
Could you please explain what would be the differences in those two changes?
@@buraksurumcuoglu8303 I think, using self-closing divs here would benefit readability and in this case they don't contain content, so why having a closing tag.
Using a callback for state changes always ensures that the most current state, which is passed as an argument to the callback, is used. There are indeed some edge cases, where this is critical
@@Rulito2405 Thanks for clarification!
I recently got asked a similar question like this during an interview! Some difference though, they asked me to place an emoji onclick and some related follow-up requirements.
hopefully you were able to solve it and it wasn't too difficult.
Great vid like always. Whenever we want to store a previous state I've been taught to think of useRef. Any opinion on taking that route?
UseRef would be ok as well, and it might make more sense in this scenario since we donât care about rendering the popper points to the screen.
@@WebDevCody I'm guessing the execution would be very similar. We would have two different Refs one for the undo and one for redo - both holding arrays in the same manner?
@@TheTreeBlazer you could use a ref for the popped circles, but youâd still need a state array so react could properly update when you push things to the screen
the default button looked real nice....
props for posting this. It takes a lot of humility to show yourself struggling through a junior level interview question. keep at it you'll improve over time.
đ»
Could you put all of these interview videos into a playlist?
Yes good idea
Great! Just a suggestion, you could use the position itself as a key:
key={`${point.x}-${point.y} `}
So we don't have to use the index since the point position is kind of a "unique" identifier already :)
He mentioned that the user might click on the same spot several times
Depending on the requirements of the scenario, there are a few approaches you could take to avoid using the index-key anti-pattern - deduplication or uniquely identify points.
Deduplication (as part of handlePlaceClick()):
points.filter((point, index, array) => array.findIndex(_point => _point.x === point.x && _pount.y === point y) === index)
Recommended approach as from a UX perspective it doesn't make sense to allow points with the same coordinates. Especially with undo/redo functionality as undoing/redoing a stacked point has no UI change and could cause the user to assume it's a bug.
Unique ID:
Easiest would be to timestamp when a new point is made and persist this to TPoint object, e.g. { x: e.clientX, y: e.clientY, createdOn: Date.now() }. Then this value is used for the "key".
I'm sure there are other approaches, but these were the 2 that came to mind for me.
I have managed to render the circles dynamically on each click with the appropriate coordinates, I basically used useEffect() to render/calculate the mouse position, UseState() to store the mouse coordinates, and used a to render an HTML circle. However each time I click the old circle will disappear and a new one is formed. Any tips on how to store the circles in an Array?
can you store them in the array like I did in this video? just concat into the array?
@@WebDevCody I'm avoiding watching the video to see how far I can go on my own. I'll try again thanks :)
@@Sweet_Solos oh nice good for you! Glad youâre trying to work it out. Usually you can just do [âŠpoints, newPoint]
â@@WebDevCody I got it to work with the spread operator thanks!
function createCircle() {
setCircle(circle => [...circle, circleImg])
}
It's the process for me. This video really highlights what web dev is really about.
Great video, thank you sir!
Very good and informative video,thank you!
So if we add or remove one element we always have to copy the whole array?
There's no collection changed event that you can trigger in react?
Also in your click handler you always redraw every single point on every click?
What if you have 1 million points in your array?
Maybe I'm reading your code wrong, i have no idea about react.
When i heard about drawing circles i also thought about using canvas.
Hi I wonder what the name is of your VsCode extension, which is showing the Typescript error on the right side of your code while typing?
Error lens
Great video but I have one question, did you mean to declare const poppedPoints in both the handleRedo and handleUndo function? Please respond and if yes explain why. Thanks
You mean poppedPoint? Yes I wanted to keep track of which point I removed so i could append it to the stack
Yes I meant poppedPoint. I am fairly new to web development but I thought there was a golden rule that if using 'const' as a variable declaration it should be used only once. The code obviously works that particular thing just stood out to me.
@@ZebulonHopper you can use the same variable in separate functions. They are isolated from each other due to how script works in javascript
Thanks for the clarification, like I said I am about a year into learning and your videos are great. I subscribed and started watching others you have made.
Instead of adding these offsets you could just transform the point class in css by -50%, -50% iirc, that's because the center of elements positioned absolutely is at the top left of the element instead of the center
When you do some "undos" and then create new circles, wouldn't it be better to reset the popped array?
Yes probably
Can we also have some react intermediate and advanced interview challenge guides like this one ?
you know man? I love your videos so much
keep going
At 19:32 line 37, why we directly pushed to the react state, and then setPoints again ? Shouldn't we allowed to make changes directly on the state variable, `points` ?
amazing challenge !!! which theme you use at vscode ? i love it.
Bearded theme
@@WebDevCody oooh, amazing !! thanks for the awnser, did you remeber the specific bearded ?? in vs-code exists something around 50 HAHA
Good job babe!!!
You're like his biggest fan. That's so beautiful â€ïžâ€ïžâ€ïž
Instead of offset you should use in the .point css transform: translate3d(-50%, -50%, 0); Why? Because is going to render the circle starting at top left and we want to render in the center.
I'm not very familiar with react so sorry if this is a stupid question. Was there any specific reason or benefit to having the popped points being in a state? I feel like it would have functioned the same if the array of popped points was just a normal array with no state
After a google search it turns out be a bad practice; "That's because, on every render, such variables will re-assigned (because the body of the function component executed on every render). Usually, it is not the desired behavior.".
@@LilMartyFarty If the variable containing the array of popped points is outside the App function, the same way the TPoint type is, does it still get executed every render? Does react even have access to the array if you put it outside the App function? Maybe I should set up my own react environment and see
you'd either need to have an array as state or as a ref. You could pull the array up above the component, but then if you decide you want 2 places on the app with this same approach for drawing circles, they would share the same array which is bad. You also can't just define an array because every time react re-renders the component it would clear your array.
@@WebDevCody Ah okay, thanks for explaining
To be honest I dont thing someone will benefit of task like this one. And let me clear that. Recently I applyed to a lot of junior positions and the technical interviews where 50% the same all the time. What I noticed is that people want to see how you deal with common "issues" related to react. Like "Create TODO list" or "Fetch data from API and display it, then add simulated loading"
One of the really cool tasks I had was to create node.js server where you get all the USB ports, collect the data and send it to Front End where you have to display the data. I hade to create 2 types of tree view (All, by type) and ofc all should be real time.
The questions I noticed that repeat themselfs on the "non technical" part where does:
1. What is React ?
2. What is Virtual DOM ?
3. What type is the data flow in React?
4. Can JS/TS be executed on Browers ?
5. Question about UseEffect and other react hooks.
6. Design patterns.
7. Some question about OOP
8. Let vs Var
9. What is Scope?
And a lot of "tricky" question that looks simple, but some people strugle with them like:
1. What is Doctype?
2. Where css is stored ?
3. What is difference between div and span?
4. What is Css selector ?
I hope this can help to some people who seek Junior job and have some confusion about what questions to expect. This is interesting video, but I really doubt someone will actually ask you to do something like that in Interview. :)
I donât see a benefit asking a junior âwhat is the virtual domâ. You can literally build a huge front end application and never need to know anything about the virtual dom. All of those other questions can easily be quizzed watching them use react. If they know what useEffect is, they should be able to build something with it. If you see them use let for all variables instead of using const where we should use const, you can further ask them questions to gauge their understanding. Design patterns are not important for a junior. Regardless if you think this challenge will be seen in a real interview, knowing how to build this yourself is a good benchmark of if you know how to actually problem solve and build something.
Fetching data or creating todo lists were either explained multiple times in different channels or you most likely already did that multiple times as well so that's not something I'm interested in, stuff like this with unique new ideas are way better for extending your knowledge beyond stuff that you already know
â@@WebDevCody Well I'm talking from my experiance as I said above. As one Team Lead said to me "I know you can code, but explain me." There is a lot more behind those questions. As you said, you can build entire app without knowing what Virtual DOM is or how React use it. Will you hire a guy who cant explain core concepts, just because he got entire Ecommerce app in his portfolio ? And again, this is my experiance when I started as Junior dev. And after all interviews I had, I understood the logic behind those question.
@@fen1x591 Well, this is good for you. But what this has to do with my reply ? I'm talking from experiance as a guy who seeked a job. There is million of interesting code challenges in the youtube, so what ? If you dont care about the infromation I shared, just ignore it. o_O
â @Valentin Vasilev I responded because I didn't agree with what you were saying and I stand by that
3:39 what vscode extension is showing the colors like that
what vscode font are you using?
I imagine if you click undo, then click a new point, then redo, it would add the previously undid point. Maybe i would add to the onclick function that clears the redo array?
which extension do you use to get errors in react + vite using javascript in vs code editor
Edit: hey please reply, how can I get errors in terminal like create-react-app in vite
Error lens and eslint and typescript
@@WebDevCody thanks
Very helpful!!
nice challenge and great video
This was great thanks
Do you have any advice for someone looking for a junior role who could not solve this challenge? How to improve? Thanks.
Keep practicing and building things
@@WebDevCody thank you
Superb video, subscribed.
Weâll done I learnt a lot
thank you, this channel has been really useful to me as a new developer! i appreciate your content. also, another idea for a junior challenge, maybe a type test? something like monkeytype
you should set popped is empty when click on screen
Wouldn't it be easier to track the index of the current "active" point instead of continually writing two arrays? By tracking the index and rendering the circles based on that, you can go back and forth up and down the array with undo and redo just as you are now. You'd just want to ensure that whenever the array was updated that you sliced it at the active index to remove any redo points ahead of the index (which is standard redo behaviour).
Yeah that sounds easier for sure, didnât think about that approach. Imo do whatever solves the business requirement, and refactor if your solution isnât âfastâ enough. I also didnât give really strict guidelines as to how redo should work after adding new points, so that causes ambiguity in solutions
Superb!
Wouldn't it be better to always use :
setState((prevState) => ({
stateName: prevState.stateName + 1
}))
in order to avoid race conditions?
I'm a noob dev took me a while to do this but I figured it out! Gonna keep working on getting better.
Why did the fragment allow the button to be clickable ?
Funny one :) Paused the video and did it myself. Funnily enough, our code is pretty much the same :D
Awesome đ»
hey bro. where can I find the github link for this?
Can you now do a middle and a senior interview?
Another way to fix the div onClick overlapping the button onClick is passing the event object to undo and reset and adding e.stopPropagation()
Yeah thatâs also a good approach, I didnât think of that during my recording but it crossed my mind an hour later I think đ
Does transform translate -50% -50% solves circle offset problem?
Yeah that might work, Iâd have to look more into it. Itâs probably a trivial bug that can be fixed so I didnât really focus on fixing it during the recording.
@@WebDevCody This is more than likely the issue, as its relative to the size of the pixels your displaying.
Yes, it fixes it -- By default, the left/top edge are what align to the mouse position. It's the same thing (almost) as the old school way of centering divs using transforms.
The challenges on your channel are really interesting just try and test our skillsđ
..points is wrong you should've used a function and add points to the previous state. Sometimes, you can get race condition and it's pretty hard to debug. It may happen f.e if you call set twice
//count = 0
setCount(count + 1)
setCount(count + 1)
actual value of count will be 1 not 2 after render and before if you console log it it'll be 0.
I literally have a react interview tomorrow. There is no way I could do this without looking some stuff up. I'm gonna fail this thing...
from what I hear a lot of interviews don't ask you to build anything, so you might be ok
Am I the only one who has never had to solve challenges in a job interview?
Awesome
What if you want to undo your undo?
Example:
1. Click 3 times
2. Undo 1 time
3. Click 1 time
4. Undo 2 times
The first undo will remove step 3
The second undo must bring back the point on step 2
please add videos for senior developers for react interview challenge.
the code has a problem. you need to clean the popped points when user undo several times then started to click again.
also, ref should be used to save poped point, it doesn't need to be in the state.
More videos like this đ
Thanks!
Wow thank you so much! Iâm glad you enjoy my content
This is an intermediate interview with the undo stuff
thank you
What is the desired behaviour if you:
1). Clicked let's say 4 random points,
2). Then do 2 undo's.
3). Click a new point
4). Click redo
It probably should prevent doing another redo if you change the page
junior level is getting insane imho. like wtf.. I have a job as a front end dev and couldn't do this. I guess I was just super lucky. that being said my job doesn't teach me shit... I just make websites from figmas over and over and over.
feel very stuck in my career tbh. been a year in and haven't learned much. 90% of what I write feels like CSS.
Maybe try to work on a site or project with more dynamic functionality or maybe doing some backend work
eh I actually watched this one time through and it was super easy! really love your vids man
â„â„
It would have been much easier to have the list of all the circles and a current index that tells you in what part of the list you are in. You display just the items up to that cursor ( index ) and undo / redo just need to +1 or -1 the cursor and you're done.
Lesser code, lesser useStates, no confusing logic to pop / splice the lists, more manageable code overall, imho
Would've been nice if you filter the array and remove the particular circle.
idk what your talking about, if this is junior then I have a lot of work to do
Is it what it is...
why not just use shift method in redo method
yeah that would work as well. Like I said, do whatever works. The implementation detail is not important; solving the problem is.
Explained well but, sometimes you feel regret when you understand the question that asked by interviewer was very easy...
I mean easy is relative. Whatâs easy to me wonât be easy to someone else, this is just more beginner focused if say
please make more video om react coding challenges
Would it be possible for us to develop an application for android where we can make a launcher to change the face of android, I live in Brazil and although I don't speak and understand English I like your teaching. I will be grateful for the return
I have not worked with android, so I don't know
@@WebDevCody ok
Why do you store the popped array in state? This is a big NO. If your data is not used in the return function then it does not belong in state. This causes useless renders when you are updating that array.
Sure, but who cares? This is a premature optimization and if an interviewer asked why use state I would respond with that same response that I often will not do premature optimizations until I can prove my approach is worth optimizing.
That setPopped call does not cause an extra render because react batches state updates that are enqueued synchronously. That said I commented on here suggesting an alternative approach with only one array.
what's the point of doing this in react when you can do it in 10mins using canvas?
Because if Iâm hiring someone for a react position why would I quiz them on canvas đ
â@@WebDevCody because if you're testing someone on react you'd give them something you'd actually use react for? Not drawing circles lol. Picking the right tool for the job is part of being a programmer as well, you don't need a fancy framework for this problem and if anyone actually did pick react to do this, it'd be a red flag.
@@mismagiuz you didnât understand the assignment