A lesson in refactoring react code: cleaning up a modal component

Showing you a before / after of a React modal component. Watch this if you want to learn more about how to refactor code and keep code clean.

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

[大盗江南]

Thanks buddy! I think ur channel is the best after long time of searching! love ya!

[butwhothehellknows]

Good job babe! I’m still mad about the laundry though... but good job!!!! ❤️

[CottidaeSEA]

The setTimeout approach doesn't seem particularly hacky (it's just standard JS functionality) and doesn't seem like it takes any longer to do than anything else. Using a library for something so simple on the other hand seems like bloat that will slow down your app. Unless you're going to use a lot heavier animation logic that is. In which case, absolutely use a library.

Also, a minor detail; a const like the MODAL_TRANSITION_TIME would be better off outside of your Modal function. I'd even say the functions are better off outside. Due to how React works, it will re-create the functions and constants on render if inside of the Modal function. It would also make the actual Modal function a bit more concise. That way you'd really only be caring about the state of the component inside of the function, where everything else is outside of it.
It's not to the extent that it'd make or break an app though, so it's primarily a style choice. However, I'd still say it's better to keep whatever you can outside of the component itself.

[ToddDunning]

Framer-motion. Bitch of a learning curve though. Thanks for this interesting example of having an active state decide whether to show/hide. Sorta like the reverse of an onsubmit…. :)

[kenthankgod]

Wow I thought using libraries when one can code it out from scratch was considered wrong and somewhat lazy, cos of performance issues (I'm a new react developer) I'm coding out almost everything in my recent project because of this logic I was told.

[Notoriousjunior]

No need for fadeIn and fadeOut. Could use a useReducer and boom there goes.

[furkang]

Bro this code left side is really amateur