React Recap 2: The Little Details

Whenever I code, one of my solutions sometimes involves redundancies. From there, I slowly polish and ensure that I can find a more efficient way to generate the desired result. Most of these redundancies stem from negligible details that don't necessarily have a big impact on the user. However, the developer who will maintain the code may face readability issues along the way.

While I was fixing some layout issues in my side project, I noticed two lines of code that didn't cause bugs but were rather confusing.

{displayStatsBar ? null : (
    <div className={displayStatsBar ? "" : "items-start"}>
        {items.map((item, index) => {
            return (
                // render something
            );
        })}
    </div>
)}

Now, this doesn't really cause issues. But as a developer, you would immediately see how the second line doesn't need a condition. displayStatsBar is set to false, rendering the <div>. Within the <div>, the value of displayStatsBar is checked again. In the first check, displayStatsBar is automatically false because that's the condition under which the <div> should render, right? The correct approach is to eliminate the second check of displayStatsBar because there's no need to check it again when the element will only render if displayStatsBar is false.

Fixing the code above will result to this:

{displayStatsBar ? null : (
    <div className="items-start">
        {items.map((item, index) => {
            return (
                // render something
            );
        })}
    </div>
)}

To be honest, the application doesn't change drastically. However, when I read the code immediately, I knew there was something wrong. I wasn't able to spot and eliminate it right away when I created that condition.

The little details matter, whether you're a user or developer. Both parties always prefer something that is easy on the eyes. Users don't want an application filled with bugs, and developers don't want to see messy code. But it's also in these small details where we learn and realize that we shouldn't make the same mistakes again.

Photo by Markus Winkler on Unsplash