DEV Community

Cover image for 10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

Let's Code on January 05, 2022

Last month, I posted 2 ReactJS interview questions 🎤 - Advance Questions and Commonly Asked Question and got a significant welcome by dev.to commun...
Collapse
 
armenic profile image
armenic

Thanks for nice challenges. I really enjoyed solving them! By the way beta.reactjs.org/ also started to include challenges. Maybe you can contribute to the new docs? They are open for public PRs.

Collapse
 
frontendengineer profile image
Let's Code

your welcome! ill definitely check that out. thanks for the link.👏🏻👍

Collapse
 
lovishtater profile image
Lovish Tater

Hi armenic,
I want to contribute new challenges in beta.reactjs.org/. I don't know how to contribute, I saw React's git repo but I didn't understand how to start. can you please guide me.

Collapse
 
frontendengineer profile image
Let's Code
Collapse
 
mkmckenzie profile image
Mary-Katherine McKenzie

Great exercises! Had fun with these!!

One thing I want to note - in your solutions, I often see the pattern:

const [value, setValue] = React.useState(0)

<button onClick={setValue(value +1)}>Increment</button>
Enter fullscreen mode Exit fullscreen mode

However, the React docs prefer this method of using the previous state value - passing a function that receives the previous state value.

const [value, setValue] = React.useState(0)

<button onClick={setValue(prevValue => prevValue + 1)>
    Increment
</button>
Enter fullscreen mode Exit fullscreen mode

Updating state with value instead of using the previous state function may result in some buggy behavior because of React's unpredictable & async state-updating logic. Likely won't see anything buggy with these examples since they aren't too complex, but just wanted to shout out that nuance!

Thanks again for these great exercises!!

Collapse
 
frontendengineer profile image
Let's Code

yes, passing a function is way better and the right approach to handle setting state here. Glad that you found this post useful and you are very welcome. Will create more post/video like again.

Collapse
 
dandanbohdan profile image
Dan

It was fun! Thanks a lot!

Collapse
 
frontendengineer profile image
Let's Code

glad that you've liked the coding exercises! thanks for the comment.

Collapse
 
cssmatter profile image
Manish Salunke

I found this on udemy.
React JS Coding Interview Challenges and Exercises
udemy.com/course/react-js-coding-i...

its good.

Collapse
 
replay profile image
Ionut Oltean

Nice I always look for those kind of challenges to practice

Collapse
 
frontendengineer profile image
Let's Code

i plan on making more in the future. Stay tuned :)

Collapse
 
hemavathi profile image
Hemavathi

Very helpful exercises for beginners. Thank you :)

Collapse
 
aliafify profile image
Aliafify

thanks for that nice chalanges

Collapse
 
frontendengineer profile image
Let's Code

your welcome buddy! i feel great that this content helps many devs. 👍

Collapse
 
techspace profile image
Saty4Dev

It's difficult for beginners (like me) to directly dive into building projects after learning React from online tutorials. Thanks for these practice problems, need more of these on React. :)

Collapse
 
frontendengineer profile image
Let's Code

ive been there before and i know how you feel. i’ll try to find more time and do more. i’ll post when i have something ready. thanks for the comment

Collapse
 
abbydorso profile image
abbydorso

this is so helpful for interview prep, thank you!!

Collapse
 
frontendengineer profile image
Let's Code

helping engineers like you and me are the goal of this post and video.

I appreciate the comment and stay tuned for more post like this.

Collapse
 
belle1306 profile image
Isabelle Francis

For create counter app challenge, i created two functions (decrease and increase) to be passed instead, later simply calling ....is that inline with best practise?

Collapse
 
frontendengineer profile image
Let's Code

it is and is common in any ReactJS applications

Collapse
 
sandyml profile image
sandym

I enjoyed this! Thank you so much!!! If anyone have anything similar please share! I would love to tackle on some more!
Thank you in advance!

Collapse
 
frontendengineer profile image
Let's Code

you are welcome!

Collapse
 
veronicamarie24 profile image
Veronica Valenzuela

This was so helpful, thank you!

Collapse
 
frontendengineer profile image
Let's Code • Edited

your welcome Veronica! check the youtube video i have above for additional reference. Many found it useful as well.

Collapse
 
pcoch profile image
Pcoch

Out of curiosity, if you could do all of these quite easily without any external help/docs, is that a good sign you might be ready for a React Junior Dev role? 🤔 Or would we need to be answering the advanced ones?

Collapse
 
frontendengineer profile image
Let's Code

this is question is more tailored for experienced/advanced React Dev.

you can expect basic Q&A for React Junior Dev and small react exercises

Collapse
 
urmajesty516 profile image
Janice

I found these exercises are too easy. Could you please mention that these are for absolute beginners somewhere in the header of the post? I doubt that any interview question would be this straight forward. Nevertheless, appreciate your effort on making the post, it has to be useful for someone 👏🏻

Collapse
 
greenjscoder profile image
Neuro Neutro

too easy for interview, look real example
https://stackblitz.com/edit/stackblitz-starters-rqq4bw?description=A%20create-react-app%20project%20based%20on%20react%20and%20react-dom&file=src%2FApp.js,src%2Findex.js&title=React%20Starter
you can make that all works as expected, but wont pass interview because of interviewer wants you write some functions in other way

Collapse
 
greenjscoder profile image
Neuro Neutro

and you can forget some things because of worrying

Collapse
 
ersankarimi profile image
Ersan Karimi

For me (beginner), this is very helpful and gives an overview of the interview later. Thank you for sharing

Collapse
 
frontendengineer profile image
Let's Code

absolutely! what is your status currently? are you in the job market?

Collapse
 
anandbaraik profile image
Anand-Baraik

Good job man. Intresting exercises.

Collapse
 
frontendengineer profile image
Let's Code • Edited

thank you Anand! What is your favorite exercise and why? Or perhaps anything that you would like to see on the challenge.

Collapse
 
sd_sharon_ profile image
Sharon_Rosario • Edited

hey bro please make more challeneges like these.. i want some hard level questions

Collapse
 
vajin1125 profile image
Vasile Engineering

Very helpful for me. Thank you.

Collapse
 
frontendengineer profile image
Let's Code

of course. very welcome and happy to help

Collapse
 
abusameer profile image
Abu-Sameer

think you i really enjoy the challenge

Collapse
 
frontendengineer profile image
Let's Code

i am glad you feel that way

Collapse
 
katrinbelova profile image
Katya Belova

That challenges too easy! Like for the junior level.
I would be glad to see more complecated challenges from you :)

Collapse
 
frontendengineer profile image
Let's Code

sure. I can take it up a notch