REAL React Interview Questions - Live Coding

--
Follow Me Online Here:

--
My gear:

--
Who am I?

[thexpand]

I believe there are a few things that I would have done differently and I am sure that implementing them could win you bonus points:

1. One of the wrapping <div> elements can be replaced with a <form> element and then the handleLogin can be passed to the onSubmit prop of the form. The <button> then becomes a type="submit" button and doesn't need the onClick prop.
2. Probably it makes sense to clear the error if the user starts to change one of the fields again.
3. Also, I would use a nulll value when there is no error - it makes more sense for it to be null as this means that there is no error. An empty string for an error might indicate an error that doesn't have a description or some kind of an unknown error. I know that probably won't happen in real life, but it's a good practice to differentiate between null and an empty string.
4. setLoading(false) can go at the bottom, after the try/catch, instead of repeating it in both the try, and the catch. There's no need to place it inside. Alternatively, it can go in the finally clause of the try/catch block.
5. I personally take naming very seriously. disableButton sounds more like a name for a function that when called would disable the button. Probably would be better to call it isButtonDisabled.

[mc-qfbp]

Instead of adding setLoading false in two places in both the try and the catch, you could've added a finally block and added it to that.

[thatrandomperson]

This is fairly simple and I can probably do it in that amount of time, but I'm sure to fail if you give me time limit and have someone watch me code. 😢

[craigmars]

This is so helpful!! I’m busy completing an advanced React course and this is such a great way to measure where I’m currently at! Please don’t stop making these vids, it has so much value!

[adeleke]

Thank you Peter. I tried solving the challenge before you did it and was able to solve it in 16min 30s. I had a bunch of hiccups which slowed me down but I'm glad I was able to solve it.

[gshankar]

really good content Peter..it is helping me a lot to learn front end technology because you deal with concepts and understanding more than routine tutorial walkthrough

[ProwlerDigital]

Thank you! This is exactly the type of react content I’ve been looking for. Appreciate it

[drewbird]

After doing a few take-homes and live interviews lately; I've thought that it would make a cool youtube series/channel to collect them from devs doing interviews. Maybe with two formats. One video where it's new to the dev and then a second video with a "designed" solution.

Cool to see a little peek of your freelancing progress too! 👍🏼👍🏼

[blue-jkqu]

thank you! this is super helpful :) especially the trick with 'disabledButton' variable, I've been using conditional rendering based on 'loading' value, but that's a lot more neat, thanks again!

[bastienv]

great, I've go over the 15min but I got it. If you have more like this, it will be so helpful! thank u very much for sharing

[rylsdark]

this was a quite chill and easy challenge, managed it in roughly 8 mins (including fixing the dependency tree which was outdated for today's standard due to node major version change)

for those wondering, just input these commands on first install if you're running node v17+:

>npm i
>npm audit fix --force
>npm update

then just do the normal npm start and it should run fine.

cool stuff that i find better than what was shown on vid:

i did the button disabled by:

<button disabled={loading || !email || password.length < 6}>

which is way quicker than declaring a whole ass const.

and the div was only shown by doing this:

{error !== '' ? <div `stuffHere..`>{error}</div> : null}

which is the most appropriate way of doing what was asked.

[arcosd]

Awesome exercise Peter, thanks a lot!

[galkoaz]

Well done Man can you upload more React Interview Questions like that but more harder?

[sarvarsaidov]

great content, more interview live challenges like this are really helpful👍

[aabhasjain]

Hey Peter, Thanks a lot for making this video. I would request you to please release more such type of live coding vide. It is very useful. Once again Thank you so much.

[joaquindicio]

I've been looking for a video like this, thanks

[noorb]

Thank you ... please make more videos on real react coding challenges

[rmakan]

Hey! Thank you for uploading this, very useful :) Could you please tell me where to find such challenges?

[tylermyers]

great video man thank you. all well and good!

[kwanyeetan]

Hi, thanks for the video. I saw that you have 4 declaration of useState(). Would it be recommended that I use useReducer() for this problem instead?