What does clean code in React look like?

A few weeks ago I mentioned I was starting to learn React. I’ve finally finished a few days ago the PluralSight course mentioned in that post. The course was good for me to get my feet wet in React. However, as I stumble across React code in the Real World, I just knew I’d continue to see Spanglish in Programming.

See this example:

As I read the code above, specifically the bit indicated with red arrows, this how it sounds in my mind:

if page type is greater than or equals to this constant and wait, does the thing following that && actually evaluate to a boolean?!

I have no sympathy for code that mixes different language in the same file. It gets even worse when the code mixes different languages in the same function, method, etc.

That reminds of the day XML literals were added to VB, and of course, people start using it in the worst possible ways. The ability to mix different languages can be very powerful, but to me, there should some separation so that the brain doesn’t have to deal with so much context-switching.

Anyway, the example above doesn’t look like clean code to me. I’ve asked a fellow co-worker who’s more experienced in React, and he showed me how the code above could be cleaned up: simply extract the bits that create HTML into its own functions.

I believe every developer should always ask: “Is this readable? Is this clean? Is there anyway I can make it better?”.

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: