This live refactoring was too hard to finish - refactoring a react app & express api

refactoring some code provided by a subscriber and giving some opinions on the code.

00:00 express refactoring
27:38 React refactoring

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

[timeflows]

I think doing this type of refactoring while having the guy who wrote the code on a call would make these videos even better

[pesterenan]

That was very insightful to watch. I'm a software developer intern since the beginning of this year and I'm mainly using JS, React and related technologies, so I'm always happy to know that I can almost think like you're doing in the video, I can spot some little mistakes and learn some tips while doing it too. Keep up this work, this is really valuable!

[Anbaraen]

It's not the flashy beginner stuff of "watch me do a Hello World in [new trending framework]" (which, don't get me wrong, also has a place on YouTube) — but this is some of the most valuable content for JS devs on the platform imo.

[XeonProductions]

I really like how you explain your thought processes as you're building things out.

[ThePenitentOneArg]

This video it's not a short video about something new, it's real work of refactoring and at the same you make comments like using Prisma instead of sequelize... I find this kind of videos really helpful. This channel should have a lot more of subscribers

[tinpham]

I also refactoring my full stack app right now(although it had not been completed yet), i though it gonna 'waste time', but seeing you motivate me to keep continue, thanks man.

[mariusj]

You would get a heart attack viewing my code, I jump between python, react and C all day, writing most API’s and sockets, but mixing syntax’s, and write both long function names and a lot of comments because I remember like a goldfish. I have two guys cleaning up and refactoring the code constantly, so the end result get pretty ok. Anyway, love your videos and the way you structure the projects.

[Glinkis]

A suggestion is to create a git branch and refactor and check in one small part at a time.

It forces you to focus on one thing at a time, and makes it easy to roll back if you break something or start touching too many things.

That's the technique I use when working professionally, and works very well for me personally.

If you don't want to push code online, you can easily create a local branch that you just use for the video.

[MailsonWei]

this is amazing video. i learnt a lot as i am still learning everything that needed to be a software dev

[RainbowCandy]

It so satisfied me and grow more the ideas to refactoring mine. Keep doing

[timeflows]

that journal component lives up to its name 🤣

[elmalleable]

tip: when renaming variables or function names, click on the variable or function and hit f2, vs ccde will rename all the other references for that specific function or variable within the same scope level so it is super great if you are renaming stuff that have same name but exist in different scopes,

[PatalJunior]

I think that his api should have also a version, so that if in the future he dedicded he wanted to change a lot of stuff, he just changed the version /v1 to /v2 without breaking the old stuff

[chirilovnarcis]

Well, at least i'm not the only one who got headaches from this app

[annusingh]

Hi, can you please suggest a way in which we can use these refactoring videos for our learning? What should we do while watching it? Should we pause and attempt to refactor it before watching your solution? Thanks

[yanngranjon]

The problem with doing
const diaryData = diary?.length > 0 ? initialDiaryData : defaultDiaryData
is that if diary is undefined, then diary?.length is also undefined
So you're doing undefined > 0
Which "works" in pure javascript, but comparing undefined with a number is a big no no in typescript.
Which is probably more reasonable than having to guess that undefined will be cast to NaN and that NaN is neither greater nor lower nor equal to 0. (NaN isn't even equal to itself :D, NaN !== NaN)

So, a quick fix I tend to use would be:
const diaryData = (diary?.length ?? 0) > 0 ? initialDiaryData : defaultDiaryData
so that you make it clear that you want to treat undefined as 0 (: