Make your code the best version of itself

Dog wearing glasses
Dog wearing glasses
Photo by Cookie the Pom on Unsplash.

I recently wrote an article about using object literals rather than if/else and switch statements to make your code more readable and was interested to read through the responses. It’s clear that code readability means different things to different people. In fact, it’s one of the most subjective things about writing code, which is why it’s such a contentious issue.

So what hard rules can we nail down to make sure we always write readable code?

What Is Readable Code?

Let’s start with a definition. For me, readable code has always been about reducing cognitive load on developers who are coming to that code…

Build awesome UIs in your React apps

Computer parts on a table
Computer parts on a table
Photo by Robin Glauser on Unsplash.

One of the biggest challenges as a UI developer is making your code reusable whilst also keeping it clean and maintainable. I’m sure this pattern is familiar:

  • You get some designs for a component that you build, test, and deploy. Everything is looking great.
  • A new feature comes along that has similar (but slightly different) functionality. You add a prop or some conditional logic to your component to handle this new use case, which works, but things are starting to get a little messy.
  • The original feature that you built the component for now has some new requirements and you…

A deep dive into optional chaining and the nullish coalescing operator

close-up of a heavy chain, with a body of water in the background
close-up of a heavy chain, with a body of water in the background
Photo by Karine Avetisyan on Unsplash

Of all the new features released as part of the ES2020 (aka ES11) specification, I have found optional chaining and the nullish coalescing operator to be the ones I find most useful. In this article, I will show you how they can benefit your projects.

Nullish Coalescing Operator

In JavaScript, undefined and null are treated as “falsy” values. This means that it can be tricky to perform null checks around genuine false booleans — for example, 0 or false — which can sometimes be a legitimate response from a function.

Below is a (very contrived) example:

If the response from decisionMaker is…

Write better conditionals in JavaScript with object literals

Question mark next to a closed door
Question mark next to a closed door
Photo by Jac Alexandru on Unsplash.

Writing complex conditionals in JavaScript has always had the potential to create some pretty messy code. Long lists of if/else statements or switch cases can get bloated quickly.

When there are multiple conditions, I find object literals to be the most readable way of structuring code. Let’s have a look at how they work.

As an example, let’s say we have a function that takes a rhyming slang phrase and returns the meaning. Using if/else statements, it would look like this:

This isn’t great. …

Know how useEffect works to avoid lint warnings and infinite loops

Question mark scribbled on paper
Question mark scribbled on paper
Photo by Mark Fletcher-Brown on Unsplash.

If you have ever worked with useEffect, you have probably come across the following lint warning:

React Hook useEffect has a missing dependency. Either include it or remove the dependency array.

Sometimes it’s as simple as just adding the required dependency, but often this results in some pretty unexpected behaviour that leaves you scratching your head. Worse yet, you may get stuck in an infinite loop as you desperately try to close the browser tab before you bring down the API…

So how can we deal with this warning properly rather than just ignoring it?

TL;DR: If you’re just looking…

A comparison of the three contenders in global state management

code on a computer screen
code on a computer screen
Photo by Joshua Aragon on Unsplash

With the sands of global state management constantly shifting, it can be difficult to know which option to choose. Redux has for a long time been the library of choice, but with the Context API providing state management baked into React itself, many people have been declaring that Redux is dead. And now with the release of Recoil, an early-stage project backed by Facebook, we have a React-specific library which easily integrates with React’s latest features.

But which one is best for your project? In this article, I am going to integrate a simple application with each library and offer…

Sharing some insights from the past 9 months

Photo by Marvin Meyer on Unsplash

Last year, I started in my current role as a lead UI engineer. At the time, it felt like an intimidating step up — I had no experience of management, and I was moving to work in an industry I knew nothing about, in the middle of a pandemic. Nine months on, I want to share some of the things I’ve learnt.

1. It’s okay not to know everything

When I started, I was worried that the team would ask me questions I wouldn’t be able to answer. This ended up happening a lot in my first few weeks, but I quickly learnt that it’s absolutely fine…

Photo by Florian Klauer on Unsplash

Use ES6 object destructuring to make you code easier to understand

I recently found myself in a situation where I had to add an additional parameter to a function that is used in multiple places in the codebase. Because of the order of the parameters, adding another one at the end would mean passing unnecessary values when I needed to call the function, but adding it in the middle would mean breaking instances where I was already calling it. I was on the horns of a dilemma.

Let’s have a look at an example:

This is a simple function to post some data, with an option to override the base…

Photo by Rich Tervet on Unsplash

Storing state in localStorage is a great way of improving UX, so that a user can pick up where they left off when returning to an application. With React hooks, it’s super easy to abstract this functionality so it can be reused anywhere. In this article, I am going to go over the implementation, and also show you how it can be tested.

We are going to be building a good old counter app, and storing the count variable in localStorage so the value is persisted between sessions.

TL;DR — you can find the final code for the project here.

Simple counter app

Jack Taylor

I am a UI developer writing about JavaScript, React and tech in general. Sign up to my newsletter on my website:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store