Facebook EmaiInACirclel
Software Development

Records and Tuples: Tips to Improve React Code, from Facebook Associate, Sebastien Lorber

Andrei Gavrila
Andrei Gavrila
Head of Products Development at Pentalog

If you’ve ever felt frustrated when you compare two objects or arrays in JavaScript and it returns false even though the values inside look the same, don’t worry too much about it.

We have some very useful tips to improve your React code, straight from Sebastien Lorber, a React expert and Open-source developer collaborating with Facebook. In his PentaBAR presentation “Records & Tuples will improve React”, he explains exactly what to do, through two live demos.

Records and Tuples

What is Records and Tuples?

If you are a frontend developer or backend developer using JavaScript, then you need to learn about primitive data types versus reference types, and how the process of memory allocation works.

The good news is that this confusion will be cleared up by Records and Tuples, the new immutable data types in JavaScript.

This proposal will also improve some behaviors in the React ecosystem, because Records and Tuples make object identities more “stable”.

At this time, the Records and Tuples proposal is still at stage-2 (TC 39), but we expect it to be adopted soon.

 

How do things work today?

Currently, if you compare two objects with the same values inside, you will get “false”;

The same is true for arrays (an array is an object):

 

How can you improve the understanding of this behavior in JavaScript with Records and Tuples?

By introducing two new deeply immutable data structures to JavaScript:

  • Record, a deeply immutable Object-like structure #{ x: 1, y: 2 }
  • Tuple, a deeply immutable Array-like structure #[1, 2, 3, 4]

These “compound primitives”, although not available in any browser or runtime yet, will help solve real-world React issues.

 

Why use Records and Tuples to improve React code?

If you consider Records and Tuples like any other library – such as Immer.js – and you add it to your project, you will benefit from its properties.

But since it is not yet implemented in browsers, it may not be very performant, but it can still help with known React issues, such as:

  1. SecurityIn React, we are used to the immutability concept:

    But that is not enough. Records and Tuples will help make objects in React more “stable”.

  2. Performance – Re-renders that can be avoidedThe case of useMemo, when you need to fetch some data from the backend:

    With Records, this becomes:

  3. Behavior – Useless effect re-executions, infinite loopsThe useEffect and “infinite loop” issue:

    Can be solved with:

  4. API surface – Inability to specify when a stable object identity matters

Don’t wait any longer – dive into Records and Tuples!

Watch our PentaBAR event featuring Sebastien Lorber, and you’ll learn how “Records and Tuples will improve React” with two live demos.

You can also try this Records and Tuples playground, that can run React. Keep in mind, however, that the proposed implementation could change in the coming months.

For more information on this topic, you could also dive into Sebastien Lorber’s article.


Leave a Reply

Your email address will not be published. Required fields are marked *