DEV Community

Cover image for Refactoring A Junior’s React Code - 43% Less Code With A Better Data Structure

Refactoring A Junior’s React Code - 43% Less Code With A Better Data Structure

Johannes Kettmann on November 11, 2022

As an (aspiring) Junior React developer it’s hard to understand if you’re code is any good and how you can improve it. It would be great to get a r...
Collapse
 
yukikimoto profile image
Yuki Kimoto

Thanks for React information. I use Perl in my web development. I can combinate with Perl and React.

Collapse
 
augustoc profile image
Augusto Collerone

Nice video. Great to see your thought process

Collapse
 
schleidens profile image
Schleidens.dev

Thank you 🖐

Collapse
 
jd2r profile image
DR

Really interesting. Thanks for this informative article!

Collapse
 
jkettmann profile image
Johannes Kettmann

Thanks, I'm glad you liked it

Collapse
 
adetobaadedeji profile image
Adetoba Adedeji

Thanks for this. I learnt a lot following your explanations. But I have a point to make. The reason he had the onClick function on the row is to be able to click the row to check and uncheck the box, removing it won't give that opportunity anymore. You can now only click the box to check and uncheck after removing it.

Collapse
 
jkettmann profile image
Johannes Kettmann

Yeah that's true. I mention in the video that removing the click handler from the tr is a change in behavior. But in the original code there's a click handler on the tr and on the input which doesn't make sense imo. And if we wanted to make the tr clickable we would have to adjust more things like setting a tab index to make it accessible. So I just opted for using the input

Collapse
 
jcyber101 profile image
_jcyber

This is really cool to see how in depth you went with this. As a junior react developer myself I’ve never seen any utilize the document object within a react application. Is this as common as it seems?

Collapse
 
jkettmann profile image
Johannes Kettmann

Yeah, it's not very common. There are scenarios where it's required. For example, when you need to attach a scroll or click listener to the HTML body. Or maybe when you work with third-party tools where you can't use a ref. But in most cases there's a more React-like alternative.

Collapse
 
pierre profile image
Pierre-Henry Soria ✨

Great read! Thanks for sharing this with us Johannes! 👌

Collapse
 
kreamweb profile image
Emanuela Antonina Castorina

Thanks for sharing this refactoring code it was really interesting. Mainly in the use of Set.