There are two data types that I quite often run into issues with down the track when fixing bugs of implementing new features – Arrays and booleans.

Booleans

What’s wrong with booleans? Nothing per-se, but they can become a problem when used to keep track of states. For example isLoading. It seems simple enough in the beginning but what happens when you need to track other states like pending or ready? You might end up creating a bunch of new booleans and eventually they become a nightmare to keep track of.

These days I will often reach for a string that can be one of many states. It is much easier to track the value of a string and add new states in the future without affecting existing logic, instead of checking multiple booleans.

// booleans
let isLoading = true;
let isPending = true;
let isError = false;

// versus string
let state = "loading" | "pending" | "error";

Some might say that this is where you should be using a state machine, and they are not wrong. However I find that using a simple string value is usually enough without needing a full-blown state machine library. This is especially true when the state is contained within a single React component and not broader application state.

Arrays

Arrays have recently become a problem for me when storing data in a JSON structure. The issue is with collaborative environments – two people can’t make changes on the same array without conflicting with each other (without complex conflic resolution logic).

A simpler approach is to use an object or map, where each entry contains an order property. Operations on the object can automically update the order property without affecting anything else, and it is simple to detect whether a single value conflics.

When inserting or moving items, the new/updated item recieves an order that is the average of the items either side. This technique is called fractional indexing. Note that if you use plain numbers for the order you will quickly run out of precision from calculating averages. By using a higher base like base 62 or higher you can support practically limitless inserts and reorders without running out of precision. This is demonstrated by Figma which uses base 92 and they don’t run into problems.