Records And Tuples Usage In React

Records And Tuples Usage In React

Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39. They bring deeply immutable data structures to JavaScript.

Records & Tuples, a very interesting proposal, has just reached stage 2 at TC39.

They bring deeply immutable data structures to JavaScript.

But don't overlook their equality properties, that are VERY interesting for React.

A whole category of React bugs are related to unstable object identities:

  • Performance: re-renders that could be avoided
  • Behavior: useless effect re-executions, infinite loops
  • API surface: unability to express when a stable object identity matters

I will explain the basics of Records & Tuples, and how they can solve real world React issues.

Records & Tuples 101

This article is about Records & Tuples for React. I'll only cover the basics here.

They look like regular Objects and Arrays, with a # prefix.

const record = #{a: 1, b: 2};

record.a;
// 1

const updatedRecord = #{...record, b: 3};
// #{a: 1, b: 3};

const tuple = #[1, 5, 2, 3, 4];

tuple[1];
// 5

const filteredTuple = tuple.filter(num => num > 2)
// #[5, 3, 4];

They are deeply immutable by default.

const record = #{a: 1, b: 2};

record.b = 3;
// throws TypeError

They can be seen as "compound primitives", and can be compared by value.

VERY IMPORTANT: two deeply equal records will ALWAYS return true with ===.

{a: 1, b: [3, 4]} === {a: 1, b: [3, 4]}
// with objects => false

#{a: 1, b: #[3, 4]} === #{a: 1, b: #[3, 4]}
// with records => true

react react-native reactjs javascript typescript ecmascript-6 coding programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Share Code Between React Native and React JS

React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.

Getting Started with React Native Debugger

Getting Started with React Native Debugger. React Native Debugger is a powerful tool that helps developers debug React Native applications more quickly.