For a junior not bad, but this would not pass a senior interview: - Promise.all() doesn't make sense here, the setState() methods are sync. At best confusing it's being mixed up with Redux's batch() (I'd ask that to the interviewee). - Cloning the dots to then mutate them tells me you are not too familiar with pure operations, lot of typing where it could be done with just: `const [...newDots, lastDot] = dots;` - No consideration for "breaking the timeline"; if you undo and then draw, *most* programs would clear the redo history but in here you can continue. This would be a good question to ask your interviewer in an interview. - 2 data structures, you could have kept the original `dots` and then an `index` integer that moves up and down as you undo/redo. Not a big deal, but should be considered for a more senior role.
@jordyvandertang2411
Жыл бұрын
I was watching the video and though I had somehow missed a core part of react with useState returning a promise. I'm glad that is not the case 😅
@thedevenvironment
Жыл бұрын
I will challenge you on some things: - 1. using the promise.all is a way to return multiple operations one a single line, I did not await them, therefore I'm not looking for async functionality here. I clearly stated it was a preference, but not mandatory. - 2. In a live coding test, often times there will be edge cases that can occur, I agree using the pointer method is optimal, I also stated a few other options in the video. But I disagree that performing a new operation should overwrite history - this doesn't exist in almost any program in the history of software. I would love to interview you for a live coding test, send me your info and we can make a video!
@zir1010011010
11 ай бұрын
@@thedevenvironment 1. state updates are batched, the setDots returns an undefined - awaiting would do nothing as those are not promises. Promise.all doesn't do anything there, it's just confusing
@eshw23
9 ай бұрын
@@thedevenvironment setState doenst return any promise, react batches both setState functions
@patcoston
Жыл бұрын
Instead of using the second cache array, you could have a property named visible on the dots object which is set to true by default. When undo is clicked, set the last dot with visible === true to false. Do nothing if none are true. When redo is clicked, set the first dot with visible === false to true. Do nothing if none are false. Only render dots with visible === true.
@liamwelsh5565
11 ай бұрын
Cache array is more efficient because the redo function is O(1). Removing an element from cache array and adding to state array is constant time. In your approach, redo would be O(n) because worse case (and quite often), you'd have to traverse the entire list to find a dot to set to false.
@cenkakay3506
11 ай бұрын
What about store board within every event ? And don't use setState with current state use 'prev'.
@kolonkignome2696
Жыл бұрын
Hi! Thanks for the video! Interesting approach. If I had to do this, I would probably keep an array of dots in state and also a pointer, which points to the last dot that has to be drawn. If I undo, I move pointer to the left. If redo -- move it to the right
@codenerd7823
Жыл бұрын
yooooo, I also tried this challenge. Same pinch 😊😊 It feels good after completing these tasks
@thedevenvironment
Жыл бұрын
That’s amazing, keep trying the challenges!
@chrisbolson
Жыл бұрын
A great tutorial/challenge. Thanks. Clearly laid out and good explanations of each step. I was going to ask how you would deal with pressing the "undo" or "redo" buttons if you had added more dots since the last time you pressed the buttons, but Andreas's comment and your reply regarding resetting the cache to an empty array would resolve that issue.
@slammgucci
11 ай бұрын
i did the challenge very simple: import React, { useState } from 'react'; function DotApp() { const [dots, setDots] = useState([]); const [isDrawing, setIsDrawing] = useState(false); const [removedDots, setRemovedDots] = useState([]); // State to store removed dots for redo const addDot = (event) => { if (isDrawing) { const newDot = { x: event.clientX - 5, // Adjust for dot size (10px x 10px) y: event.clientY - 5, id: Date.now(), // Unique ID for each dot }; setDots([...dots, newDot]); } }; const removeDot = () => { if (dots.length > 0) { const removedDot = dots[dots.length - 1]; // Get the last dot const updatedDots = dots.slice(0, -1); // Remove the last dot from the array setDots(updatedDots); setRemovedDots([...removedDots, removedDot]); // Store the removed dot } }; const redoDot = () => { if (removedDots.length > 0) { const lastRemovedDot = removedDots[removedDots.length - 1]; setRemovedDots(removedDots.slice(0, -1)); // Remove the last removed dot setDots([...dots, lastRemovedDot]); // Add the dot back } }; return ( setIsDrawing(!isDrawing)}> {isDrawing ? 'Stop Drawing' : 'Start Drawing'} Remove Dot Redo Dot {dots.map((dot) => ( ))} ); } export default DotApp;
@thedevenvironment
11 ай бұрын
Thanks so much for sharing! Great work!
@Bissell28
Жыл бұрын
This was really helpful thank you!
@EyupKantaCanbudak
10 ай бұрын
Congratulations, again a very nice video.👏 I was going to write a comment about whether we should delete the cache when the draw function is triggered, but I think others have already written it, I guess no matter how good we are, some things can sometimes be overlooked 😅
@thedevenvironment
9 ай бұрын
hahah. thank you for all the compliments.
@CraigSnyman
11 ай бұрын
My first thought to safeguard the undo and redo buttons was to disable them depending on the dots and catch array respectively.
@thedevenvironment
10 ай бұрын
Yep absolutely a wonderful solution as well, thanks for sharing?
@Javascript-Master
10 ай бұрын
Great tutorial 👌. I think you need to clean cache when you draw a new dot. It will be weird if you draw a new dot and then redo to draw the last dot that was cached.
@thedevenvironment
9 ай бұрын
That's a good idea!
@ankitagarwal4914
Жыл бұрын
Hi - Please make more videos like these interview prompt for intermediate level developers, i learned a lot this one and Breaking Bad one...thanks. Although i subscribed your channel but haven't seen you positing more into this channel
@thedevenvironment
Жыл бұрын
Just made a new one
@MuhammadAdnan2.0
Жыл бұрын
MouseEvent was new to me , thnx
@thedevenvironment
Жыл бұрын
Glad to help, there are many types to keep track of lol.
@MuhammadAdnan2.0
Жыл бұрын
keep it update "Coding challenge playlist", its good for beginners :D
@patcoston
Жыл бұрын
To center the dot where you click, you could have setDots([...dots, { x: clientX - dotWidth/2, y: clientY - dotHeight/2}) where dotWidth and dotHeight are const values of 10. If the width and/or the height of a dot changes, it will stay centered.
@MJ-vx5cz
Жыл бұрын
You should not name your interface with s just use the name with out "s" to avoid confusion
@thedevenvironment
Жыл бұрын
I actually mention this at 23:56 lol
@MJ-vx5cz
Жыл бұрын
@@thedevenvironment sorry I did not finish the video at that time 😅
@eshw23
9 ай бұрын
Great video overall, the only weird thing was the Promise.all, the setState function in react doesnt return a Promise, why would you wrap both of them in a Promise.all?
@thedevenvironment
9 ай бұрын
Yeah... I don't really know what I was doing there. lol.
@ranteshwarsingh1482
Жыл бұрын
Awesome….
@thedevenvironment
Жыл бұрын
Thanks Rantesh!
@nikako1889
Жыл бұрын
did you delete your last video?
@thedevenvironment
11 ай бұрын
Sorry, I'm still learning how to screen record and everything lol. But new one is uploaded.
@tanercoder1915
Жыл бұрын
Applying styles to id selector ... Ewww😮 otherwise fun video
@thedevenvironment
11 ай бұрын
hahaha. sometimes we devs do dirty things to get stuff done.
Пікірлер: 39