Senior React.js Interview Question

Hey! This is a walkthrough of a React Interview I recently had for a senior role. The task was to build the game Tic-Tac-Toe. Enjoy!

react, javascript, coding, front-end, interview, software engineering, software developer interview, react interview question.

There is one bug...
In the diagnolToRow function, the decrement variable should decrease in the for loop. So, decrement-- not decrement++.

[Kris-tovh]

I believe your diagonal check only works from left to right.
In the code the const decrement starts at board.length - 1, but then you wrote decrement++.
I think that from your explanation it should be decrement—.
Clearly just a typo

[thechannel]

Pretty cool how you showed your thought process while coding, helped me keep up with you as the solution was coming together. Kind of got confused on the diagonal checking part, but I paused the video and figured it out. Nice video, keep it up

[ionutsandu]

This was a great video altought I wanna point out 2 things:

1: What happens if O clicks on a X box?
2: I don't think you got the secondary diagonal working. You were very close to get it working in your first try, the only issue is that instead of decrement++ it should be decrement-- so then decrement--

[debajitbasu]

Hey,
Your checking for winning player logic for row its okay
But column
You can also transpose the matrix first then check with existing row checking function
It would be a simple solution and with that approach only 2 for loop is okay.
For diagonal checking logic is cool, just need to update logic for right diagonal.

Great job man.
Your way of talking with code is like me and it works in real-time.

And the last one
No one is perfect you did a great job. Really appreciate your hard work.

[yuriioliiarnyk]

Looks like we also need to check if cell is empty

[Taiga.x]

Great video, I’ve interviewed a lot of
Sr SWE roles in my time. What I like while interviewing - person explains their thoughts while writing (although I’d understand if they didn’t it’s stressful as hell) but most importantly acting like us as the interviewer is a co-worker - to anyone doing interviews (maybe even with me) ask questions if you’re stuck! It happens to everyone and that’s what teams are for

Also toward the end if you make any other videos, try to explain possible better solutions if you can think of any and if you know- the time complexity/ space complexity

[sindhu]

2 things to notice here,

1. in the diagonal case, the other diagonal case wont wont work because it should decrement - -
2. Also, as soon as there is a match, the board immediately resets, it would be nice to give a 1second delay before resetting board.

[MrPlaiedes]

Lead dev here. Remember that these interviews are less about tic-tac-toe and more about React. I want to see how you create components, handle state, and show some level of composition. If can show that you're comfortable with these things, the game mechanics, styles, and typos are less important.

[therealsharat]

Why is everyone hell bent on mentioning the typo on diagonal xD?
As a dev I am much more interested in the algorithmic flow and the result of the code rather than a silly typo which has got nothing to do with the interview

I personally would've used a different method to solve the same problem, but it was really cool and refreshing to see a solution from a different perspective.
+Points for speaking out your thought process while coding! Communication is Key when working with teams :)

[okali]

Hey, great video! I just have one question, in 5:45 you are mutating the board state and then spreading the array. I think it's not very good, because you shouldn't mutate state in react, right?

[RavindraSingh-lppl]

@ Web Dev Interviews your videos are very helpful...please make more such challenging React videos.

[aleks]

I believe that solution should look for 3-connected-dots instead of whole row/col/diagonal, regardless how big the board is. That complicates calculation a bit.

[brunodevcode]

Why did you loop on all rows and all cols when you can just check the col and row clicked?
In the diagonal check maybe you can check if the active user has got the board center and if the clicked cell is on a diagonal before start to loop on the board.
Moreover I think that recursion can be a better approach to solve this problem.
The CheckForWin function can simply return the results of the specific checks in OR condition without any if.
In my opinion this solution it's not enough for a senior level.

[MichaelGhukasyan]

board[row][col] = currPlayer mutates the existing state which is wrong. Instead you should either create a copy of the state and make changes there or use map method. Also for setState it's better to use the first parameter provided by the function as the actual value to avoid bugs when the same state is changed from different places.

[nguyentienphat]

I don't know if you've read my comment. But i'm really happy with it. I've learned a lots. Many thanks

[spongefart]

18:26 im pretty sure im an idiot or something but why cant we just use a for loop instead of a while loop u wouldnt need to deal with all these variables (i did not watch the full video so…)

[dave]

Hmm, they seem to set the bar low for senior. I’d expect a senior interview to be about troubleshooting bundler configs, build scripts, babel plugins, etc. As well as app design and complex routing. The skills it takes to build tic tac toe ought to be a given at that point, like entry level. Not knocking your skills, just questioning what they consider senior.

[ShadySamir]

Shouldn't it be decrement-- ? You never tested the reverse diagonal win case in which decrement++ would have failed

[MuhammadBilal-kyyx]

if you click again on a value that is assigned it will also be changes like click twice on same div u will get it

[jeremiedsouza]

I think there's a bug where one player can over write the other player's input