What are Records and Tuples?

At their simplest, Records and Tuples are the immutable counterparts to Objects and Arrays. They are primitives, meaning they are compared by value, not by reference.

Record (#{}): An immutable, object-like structure.
Tuple (#[]): An immutable, array-like structure.

Key Syntax

JavaScript

// A Record
const user = #{
    id: 1,
    name: "Alex",
    settings: #{ theme: "dark" }
};

// A Tuple
const colors = #["red", "green", "blue"];

Note: Records and Tuples can only contain other primitives, Records, or Tuples. They cannot contain standard mutable Objects or Arrays.

Why Value Equality Changes Everything

In standard JavaScript, two identical-looking objects are not equal because they point to different memory locations.

JavaScript

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 === obj2); // false

const rec1 = #{ a: 1 };
const rec2 = #{ a: 1 };
console.log(rec1 === rec2); // true!

This "Equality by Value" is a game-changer for performance optimizations.

Simplifying React State Management

React relies on shallow equality checks to determine if a component should re-render. This is where the friction begins.

The Old Way: Deep-Cloning & Spread Operators

When updating nested state in React, you must ensure you don't mutate the original object, or React won't "see" the change.

❌ The Manual Struggle:

JavaScript

// Updating a nested property requires spreading every level
setUser(prevUser => ({
    ...prevUser,
    address: {
        ...prevUser.address,
        city: "New York"
    }
}));

This is error-prone. If you forget one ..., you accidentally mutate the state or lose data.

The New Way: With Records and Tuples

Because Records are immutable by default, you can't mutate them. When you create a new Record from an old one, the comparison remains lightning-fast and predictable.

✅ The Record Approach:

JavaScript

// Because they are primitives, React can compare them instantly
const nextUser = #{ ...user, city: "New York" };
setUser(nextUser);

Performance: Records vs. Deep-Cloning

When using JSON.parse(JSON.stringify(obj)) or structuredClone() to deep-copy objects, the engine has to traverse the entire tree and allocate new memory for every single node. This is computationally expensive ($O(n)$ complexity).

Records and Tuples provide:

Structural Sharing: Engines can optimize memory by sharing parts of the data structure that haven't changed.
Instant Comparisons: Comparing two large Records is much faster than deep-comparing two Objects because the engine can use internal hashes to verify equality ($O(1)$ in many cases).

Summary Table

Feature	Objects / Arrays	Records / Tuples
Mutability	Mutable	Immutable
Comparison	By Reference (`obj1 === obj2` is false)	By Value (`rec1 === rec2` is true)
Type	Object	Primitive
React Impact	Requires careful spreading/cloning	Automatic "memoization" safety

Is it ready to use?:

Records and Tuples are currently in Stage 2 of the TC39 proposal process. This means they aren't in browsers yet, but you can experiment with them today using Babel plugins.

Please Wait

Comments (0)