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

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

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.

This is great, would love to see more of these.

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

Great video Johannes! I had your blog on this lined up for reading for a year now. I saw the video and just went for it now. 😆

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

The refactoring is just on point. Good work.

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

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

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.

Great work brother . Expecting more like this 👍👍

This is was amazing, would love to see more content like this

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

Keep doing these awesome videos. I find them so helpful!

Awaiting more video like this, Thanks for posting!!

Awesome. Would like to see more videos like this

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

This Is really helpful as a junior dev myself!

I love these kinds of videos! Great stuff!

Great video! I would love to see more of these

Great video, really helpful for someone getting started!

Thanks. As a just learned react developer, this will help me

WE NEED MORE OF THIS CONTENT

Awesome stuff, would definitely love to see more of this. Liked 'n subscribed!

This is wonderful, this kind of content is very helpful

Wow this video was actually amazing, that's wild!

Subscribed! I want more of this. 🤩

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

thanks for this, helps a lot as a junior

aah I could watch these all day. Loving it! Very tempted to send my code... hoy could I do that? Cheers!

I subbed, hoping to see more refactoring videos!!

Hi, hope you will have more of this video series, or refactoring playlist. Thanks for the content! thumbs up!!

Thank you for this video! Helpful 💓💓

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

Thank you so much. If possible, please upload a video on how to develop a production ready react app, for example the folder structure, custom hooks, global context store, global axios confg, etc.

Excellent refactor, well done

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.

very nice, clear and helpful for me as im practicing with react! although i needed to watch it in 0.75 but thats because im not native english 😅

Loved this kind of video!

Really cool video! Thanks!

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

I would love to see more

Amazing video ! May I ask when is it appropriate to use a map vs an array?

wow, great work! how long would it take you to do these refators in real time? I imagine its not done typically within 20 minutes... thanks for the video

Nice! Would be interesting to see how the solution can be extended for a filterable list

more videos like this please!

I gotta say.. your tone and presentation is super monotonous, but the value of what you say and explain is great. Well done I agree with all you said. One thing about the Map though. Personally I dislike using Maps on very big data arrays, and simply revert to arrays + writing helper functions for search and filtering but a Map is much more readable and "easier" to use

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

Very informative!

Hello, as your map of completed issues only ever has a value of true, was the only reason you used a map instead of an array/set here so the lookup could be faster when checking if the issue is completed or not? A set of IDs seems to make more sense imo Thanks

thank you very much for the video

Last issue is not using typescript

Do it just do it this is awesome

This was very insightful. As a junior dev I learned a lot. Most importantly is that I really have to start using the new Map instead of just objects and I actually didn't know about the ".size" property. does it work with "regular" objects? Last question is a bit longer but since you touched on that subject I'll allow myself to ask that: I have an app in which I have a sidebar with buttons which run functions (ofc) and one of those uses the text in the main layout. In that case, using a ref felt like bad practice since I would have to either forward it through many cmps, store it in the global store or use context instead of just accessing it directly... what is your take on that? Thanks! :)

Great video :)

One question , the thing where you replace the for loop for counting elements that have the status open with a filtered array ( arr.filter().length ) just to have it just "pretty" impact the memory usage ? U don't just iterate thought the the array that you have , u create a new array so , allocating more memory .Maybe a middle ground can be a reducer :D

a note on Map and Set Javascript structures. with Node.js it's fine to use them, but avoid using them on v8 (browser). V8 uses a ton of optimization techniques, specifically for basic array and objects that cannot be done for Map and Set's. to be even more specific, Map and Set cannot be cached as effectively and thus become slower than if it was otherwise implemented with a basic object or array. I'm not 100% sure if this is still the case but it was when this video came out.

Omg u do it all so fast compared to me, it makes me cry🥺😭 But i wont give up 💪

Unnecessary state variables are the worst.

Very helpful review. Thanks for sharing Although I'm still not able to understand one thing In the first line of handleOnChange method you doing this const updatedCheckedById = new Set(checkedById); (I have taken this from your blogpost , in the video it is Map) How come this update the previous Set and if so the next if check should return true, but surprisingly it is returning false Can you share some thought here Apologise for my lack of knowledge in advanced

Can you add a live clock extension to vsCode so we can judge how long the rafactor actually took otherwise imposter syndrome starts acting up with all the time skips :D

im confused about the usage of !!, i understand it does a double negation and converts to boolen, but why concert to boolean if the value is falsy anyway?

Can you point me to resources explaining the !! on the input's disabled attribute?

Can i use Map, Set, Proxy, inside a useState Hook?

Boss level♥

has-method fits here better 5:45

I understand the convention that methods returning booleans should begin with `is`, since the assumption is that the method's object is the noun part of the clause. However, free variables are also nouns, not actions. I cannot help but feel that this convention being carried over to variables is a consequence of dogma, rather than usefulness. "IsIssueOpen" is a question, not a statement. "If is issue open" is not good English. Does anyone have an argument to counter this?

10:07 idk much about react, but readability was easier. Now Id make a comment above about the false states.

How did he delete the whole line at once??

Very cool content but a bit too fast IMHO. 👍

Could have used a set

bitflag, where?

I feel bad I just don’t understand

Those are some long variable and function names lol

Wow Sar, how to become pero laik u

Mmmore of. This please

WTF is with the bot comments?

Love it, thanks from sharing.