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

Find the blog post to this video including the complete code here:

00:00 - Intro
00:08 - Demo of the app
00:35 - Code Review: Overview
01:28 - Code Review: Data Structure
02:18 - Code Review: Unnecessary State
02:43 - Code Review: Directly Accessing The DOM
03:03 - Refactor: Data Structure
07:26 - Refactor: Unnecessary State
10:29 - Refactor: Final Clean Up
11:36 - Final Review & Summary

[MM-pwft]

100% do more refactoring videos, these are rare and idk if it's specifically your unique idea to do this, but this is actually gold content

[kabeegon]

Not gonna lie, this is extremely valuable information for junior developers (and even more experienced ones), thank you for sharing your knowledge, and by the way, your explanations are very clear

[Den]

Nicely done!
As a senior developer I can assure that your work here is a gem.

[diogoribeiro]

I'm a junior dev, and I was wondering why you choose map as the state data structure instead of a set, because you're not keeping the state checked per id, you're only keeping the ones that are checked. And even if you kept all ids and just toggled between true or false, in this context it still makes more sense to me to use a set.

[Peshyy]

Such a well-made video. Kudos to Profy, , this channel deserves way more subscribers and views!

[BCRooke]

A thought on the data structure you chose. A map works well. Whenever I see a map where the value is a Boolean, I ask myself if a Set would work instead. In this case, I think what you really want is a Set.

[kristianmediaposting]

I'm not a junior dev anymore, but thank you for this insightful video.
Personally, when I am preoccupied with the development or maintenance of a project, I sometimes form some bad habits, like lack of proper error handling in some logical cases, because the project needs to be developed quickly and I slack off while chasing the fast paced development of features. These types of videos really bring me back into reality and make me realize some of my newly acquired deficiencies in React.

[JulietteReacts]

Absolutely loved this article. I read it last night and could apply it in some work I went back to today, where I'd added unnecessary state that I could've derived

[ra-dro]

Thanks for sharing. Cool work.
One thing I could suggest is to split component into several smaller once.

[danieledwards]

Nice! This was a good example of simplifying the code. I think it would be interesting to see how you might word a review on an example PR like this one.

[Ss-ioqk]

Great stuff! I've definitely been sleeping on the usefulness of maps! Subscribed :)

[timshaw]

What an amazing video for someone who is learning react. Thank you for this!

[chinz]

For the first issue: Pasing an object as a parameter to fill can cause another major issue that all the object have the same reference.
Here is an example:
let arr = Array(5).fill({a:1, b:2});
arr[1].a = 6;
//This will cause all a to be 6 for "all" the objects in the array

[skapha]

Very good!
Yes, I want to see more of this stuff.

[itsMapleLeaf]

good video! I would make a habit of saying "simply" less often. what's simple and obvious to you might not be to others!

[franciscoizaguirre]

I wish I saw this YEARS ago, that was awesome and insightful

[ToadyEN]

Juniors code is better than some of the seniors where I work.

[kopfmann]

This is excellent! getting back into React after a long break, and your videos are a godsent. Keep it up!

[DenisTruong]

excellent i see a lot of general concepts i can apply, especially when implementing that none selected box, thank you

[ibraheemhaseeb]

Damn, imagine watching these videos, joining a company as junior dev and writing such code what he wrote after refactoring.