I loved solving this junior react interview challenge

[@Amy_A.]

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.

[@meaningmean]

This is going into my notes, I'll steal it

[@natural_goofy]

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

[@beakerbkr]

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

[@Hhammer]

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.

[@fen1x_fpv]

Props for including all the process (not only stuff that works but the mistakes along the way). Always super helpful!

[@JuanRodriguez-ip7qu]

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.

[@WebDevCody]

I mean, I personally wouldn't care, but other companies seem to quiz on a lot more stuff

[@velifurkanturkoglu1387]

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!

[@WebDevCody]

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.

[@internetaap]

I couldn’t agree more, well said

[@hanasschoolwork4564]

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 :)

[@arpadzein]

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.

[@WebDevCody]

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

[@alvinacosta2312]

forgot about that too and your solution was simple and brilliant.

[@alekseikovalev412]

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.

[@usernameL1]

Fun one! Solved in about 10 minutes or so but instead did it with and .

[@WebDevCody]

🎉 nice work!

[@daviddixx6737]

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

[@setarose366]

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!

[@Szakalaka79]

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.

[@SahraClayton]

Hey Cody, another great video. It's great to see your thought process and how you tackle a problem.

[@BlazeShomida]

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;

[@andyz7113]

thanks for always re-explaining beginner concepts, love u bro

[@diemantrabeats7551]

Sometimes a good typescript shortcut, is just hovering over the onclick event prop and it will show you what the event type is

[@WebDevCody]

Nice I’ll need to keep that in mind

[@captainnoyaux]

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

[@arianj2863]

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!

[@tomaslachmann171]

When I see this as senior front-end dev I just smile, with things I struggled in my early days.

[@cakier]

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}])

[@buraksurumcuoglu8303]

Could you please explain what would be the differences in those two changes?

[@Rulito2405]

@@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

[@buraksurumcuoglu8303]

@@Rulito2405 Thanks for clarification!

[@robohall]

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.

[@WebDevCody]

Nice, I like that as well

[@wandevv]

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.

[@bluerose2542]

Thanks!

[@WebDevCody]

Wow thank you so much! I’m glad you enjoy my content

[@kevino2622]

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...

[@Sweet_Solos]

I've been enjoying these challenges keep them coming!

[@webdevcreation9454]

It's the process for me. This video really highlights what web dev is really about.

[@mrmartinwatson1]

the default button looked real nice....

[@rodrigorcs]

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 :)

[@김순신-w3w]

He mentioned that the user might click on the same spot several times

[@cameronm4320]

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.

[@marshal3577]

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.

[@WebDevCody]

🍻

[@butwhothehellknows]

Good job babe!!!

[@hassan_codes]

You're like his biggest fan. That's so beautiful ❤️❤️❤️

[@FalioV]

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. :)

[@WebDevCody]

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.

[@fen1x_fpv]

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

[@FalioV]

​@@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.

[@FalioV]

@@fen1x_fpv 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

[@fen1x_fpv]

​ @Valentin Vasilev I responded because I didn't agree with what you were saying and I stand by that

[@dimamarius9791]

More videos like this please, thanks for the work you've put into it, as a beginner to React, it helps a lot :D

[@suatbayrak2703]

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` ?

[@kamikazeslammer]

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?

[@filon861]

I love tutorials like this where you say out loud your thought process. Thank you, sir. I just subscribed.

[@mskzzz]

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.

[@yousafwazir3167]

We’ll done I learnt a lot

[@york2301]

Very good and informative video,thank you!

[@s03411]

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.

[@WebDevCody]

hopefully you were able to solve it and it wasn't too difficult.

[@memedealer6030]

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

[@XxDukexRoyalxX]

Could you put all of these interview videos into a playlist?

[@WebDevCody]

Yes good idea

[@nikeldev0]

amazing challenge !!! which theme you use at vscode ? i love it.

[@WebDevCody]

Bearded theme

[@nikeldev0]

@@WebDevCody oooh, amazing !! thanks for the awnser, did you remeber the specific bearded ?? in vs-code exists something around 50 HAHA

[@wallpiece]

When you do some "undos" and then create new circles, wouldn't it be better to reset the popped array?

[@WebDevCody]

Yes probably

[@alberthadacek9645]

Funny one :) Paused the video and did it myself. Funnily enough, our code is pretty much the same :D

[@WebDevCody]

Awesome 🍻

[@amershboul9107]

you know man? I love your videos so much keep going

[@henrmota]

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.

[@niklassoderberg2168]

Great video, thank you sir!

[@pb8655]

3:39 what vscode extension is showing the colors like that

[@arianj2863]

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

[@WebDevCody]

It probably should prevent doing another redo if you change the page

[@lanceandreijuat3953]

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

[@dgaa1991]

Wouldn't it be better to always use : setState((prevState) => ({ stateName: prevState.stateName + 1 })) in order to avoid race conditions?

[@solowolf5304]

Can we also have some react intermediate and advanced interview challenge guides like this one ?

[@vivianliu5011]

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.

[@tylermyers8735]

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?

[@WebDevCody]

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.

[@TheTreeBlazer]

@@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?

[@WebDevCody]

@@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

[@user-cc2tu8jw5l]

Am I the only one who has never had to solve challenges in a job interview?

[@ZebulonHopper]

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

[@WebDevCody]

You mean poppedPoint? Yes I wanted to keep track of which point I removed so i could append it to the stack

[@ZebulonHopper]

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.

[@WebDevCody]

@@ZebulonHopper you can use the same variable in separate functions. They are isolated from each other due to how script works in javascript

[@nolubez79]

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.

[@philipepics]

nice challenge and great video

[@bsen2267]

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?

[@WebDevCody]

Error lens

[@o_oyash]

I'm a noob dev took me a while to do this but I figured it out! Gonna keep working on getting better.

[@Op3nMinDFoRaDiffView]

Great video! Where do you come up with these junior dev interview tasks? Is there some sort of site you can reference?

[@WebDevCody]

I just make them up lol

[@thesupercoach]

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).

[@WebDevCody]

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

[@Ironlionm4n]

Why did the fragment allow the button to be clickable ?

[@ToddDunning]

Superb video, subscribed.

[@benjaminb7544]

This was great thanks

[@ngocuc8461]

you should set popped is empty when click on screen

[@francescolasaracina3964]

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

[@RobertPodwika]

..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.

[@BobbyBundlez]

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.

[@WebDevCody]

Maybe try to work on a site or project with more dynamic functionality or maybe doing some backend work

[@BobbyBundlez]

eh I actually watched this one time through and it was super easy! really love your vids man

[@mohammadnashashibi2942]

nice one, had a play and here's another solution without the need to maintain two lists, just one list with a pointer to track undo/redo position. Hint: using tailwindcss. just started using it today so please don't shoot me if it's used all wrong :p. import { useEffect, useReducer } from 'react' type StateType = { dots: { x: number; y: number; id: number }[] undoIndex: number } function reducer(state: StateType, action: any) { switch (action.type) { case 'ADD_DOT': { return { dots: [...state.dots.slice(0, state.undoIndex + 1), action.payload], undoIndex: state.dots.length, } } case 'UNDO': { let undoIndex = state.undoIndex if (state.undoIndex >= 0) { undoIndex -= 1 } return { ...state, undoIndex, } } case 'REDO': { let undoIndex = state.undoIndex if (state.undoIndex < state.dots.length - 1) { undoIndex += 1 } return { ...state, undoIndex, } } default: return state } } function Game() { const [state, dispatch] = useReducer(reducer, { dots: [], undoIndex: -1 }) function addDot(e: MouseEvent) { if (['undo', 'redo'].includes(e.target!.innerText)) return // a shothand/lazy maybe, but you get the idea dispatch({ type: 'ADD_DOT', payload: { x: e.clientX, y: e.clientY, id: Date.now() } }) } useEffect(() => { document.addEventListener('click', addDot) return () => { document.removeEventListener('click', addDot) } }, []) return ( dispatch({ type: 'UNDO' })} > undo dispatch({ type: 'REDO' })} > redo {state.dots.slice(0, state.undoIndex + 1).map((dot: any) => ( ))} ) } export default Game

[@unicorneyelasers]

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...

[@WebDevCody]

from what I hear a lot of interviews don't ask you to build anything, so you might be ok

[@Sweet_Solos]

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?

[@WebDevCody]

can you store them in the array like I did in this video? just concat into the array?

[@Sweet_Solos]

@@WebDevCody I'm avoiding watching the video to see how far I can go on my own. I'll try again thanks :)

[@WebDevCody]

@@Sweet_Solos oh nice good for you! Glad you’re trying to work it out. Usually you can just do […points, newPoint]

[@Sweet_Solos]

​@@WebDevCody I got it to work with the spread operator thanks! function createCircle() { setCircle(circle => [...circle, circleImg]) }

[@liamwelsh5565]

Another way to fix the div onClick overlapping the button onClick is passing the event object to undo and reset and adding e.stopPropagation()

[@WebDevCody]

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 😂

[@MuhammadAdnan2.0]

Explained well but, sometimes you feel regret when you understand the question that asked by interviewer was very easy...

[@WebDevCody]

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

[@Hjgfrfjufdetivjiu]

This is an intermediate interview with the undo stuff

[@igobyalotofnames6023]

hey bro. where can I find the github link for this?

[@eshw23]

Do you have any advice for someone looking for a junior role who could not solve this challenge? How to improve? Thanks.

[@WebDevCody]

Keep practicing and building things

[@eshw23]

@@WebDevCody thank you

[@wello7266]

what vscode font are you using?

[@jitu11]

please add videos for senior developers for react interview challenge.

[@okage_]

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

[@SavageStephen]

idk what your talking about, if this is junior then I have a lot of work to do

[@03tnp]

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

[@WebDevCody]

Error lens and eslint and typescript

[@03tnp]

@@WebDevCody thanks

[@tzuilee588]

The challenges on your channel are really interesting just try and test our skills😁

[@mismagiuz]

what's the point of doing this in react when you can do it in 10mins using canvas?

[@WebDevCody]

Because if I’m hiring someone for a react position why would I quiz them on canvas 😂

[@mismagiuz]

​@@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.

[@WebDevCody]

@@mismagiuz you didn’t understand the assignment

[@akhilkhan6690]

Superb!

[@Soppybobs]

Very helpful!!

[@dolapoalli467]

Would've been nice if you filter the array and remove the particular circle.

[@pinguluk1]

Can you now do a middle and a senior interview?

[@pythonsoul3147]

Does transform translate -50% -50% solves circle offset problem?

[@WebDevCody]

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.

[@Kay8B]

@@WebDevCody This is more than likely the issue, as its relative to the size of the pixels your displaying.

[@adamlul]

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.

[@madaIin]

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.

[@WebDevCody]

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.

[@robohall]

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.

[@0xtz_]

More videos like this 👌

[@hilaryokoh]

Is it what it is...

[@josephquintiliano2904]

Are viewers expected to know how to complete this project along side you while not using typescript?

[@WebDevCody]

The video is to help people learn how to problem solve with react and typescript, so yes I’d expect someone to try and solve it with both by themselves and then come watch the video to challenge themself

[@ThanHtutZaw3]

thank you

[@nachiketkanore]

Awesome

[@aayushgupta8686]

why not just use shift method in redo method

[@WebDevCody]

yeah that would work as well. Like I said, do whatever works. The implementation detail is not important; solving the problem is.

[@tektektuktuk4086]

wait this is junior stuff? I don`t think so

[@WebDevCody]

What would you consider junior stuff?

[@chriss87878]

@@WebDevCody This honestly is junior stuff and it was a pretty great/fun question imo, good vid bro

[@serifcolakel823]

♥♥

[@thiagosoares5052]

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

[@WebDevCody]

I have not worked with android, so I don't know

[@thiagosoares5052]

@@WebDevCody ok

[@anubhapant5227]

please make more video om react coding challenges