Spread syntax gotcha in JavaScript class methods

2019-03-30

Spread syntax gotcha in JavaScript class methods

javascript, typescript, react, hooks

title: Spread syntax gotcha in JavaScript class methods date: "2019-03-30" banner: ./images/featured-image-1.jpg published_at: "2019-03-30T22:02:02.000Z" tags: "javascript, typescript, react, hooks" author: Sung M. Kim

Photo by Jay_ on _Unsplash - Don't get caught

Watch out when exposing a mutable data structure with React Hooks

When you spread an object instance of a class to expose methods, methods might not be copied over.

Suppose that you have a Trie class,
which you want to make it immutable by returning a new object using syntax spread.

Not a good idea! Explained later.

  
          class Trie { 
        
            has(word) { return true; } 
        
          }
        
          function useTrie() { 
        
            const trie = React.useState(new Trie())[0]; 
        
            return { ...trie }; 
        
          }

view raw opening.Trie.js hosted with ❤ by GitHub

Printing out trie object instance returned from useTrie won't show has and an empty method is printed.

  
          function App() { 
        
            const trie = useTrie(); 
        
            console.log(`{...trie}`, { ...trie }); 
        
            return <div className="App">Nothing to see here</div>; 
        
          }
        
          // console shows
        
          {...trie} Object {}

view raw opening.App.js hosted with ❤ by GitHub

Let's see why and how to solve the issue.

🔬 Analysis

To understand the problem, let's see how the class is transpiled using TypeScript compiler (the transpiled babel code does the same but verbose so using TypeScript compiler here).

  
          class Trie { 
        
            has(word) { return true; } 
        
          }
        
          // Transpiled as
        
          var Trie = /** @class */ (function () { 
        
              function Trie() { 
        
              } 
        
              Trie.prototype.has = function (word) { return true; }; 
        
              return Trie; 
        
          }());

view raw prototype Trie.js hosted with ❤ by GitHub

has method was added to the prototype, not to an instance of Trie class.
So has is still available when you do const t = new Trie(); t.has(); // true.

Returning a new object using spread syntax didn't copy has
because spread syntax only copies own & enumerable properties.

But [prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) is not enumerable so has is not copied over.

🧙‍♂️ Resolving the Issue

You can resolve the issue in two ways.

Binding the method explicitly to this.
Using an arrow function expression.

1. Bind Explicitly

You can explicitly bind this to the method in the constructor.

  
          class Trie { 
        
            constructor() { 
        
              this.has = this.has.bind(this); 
        
            } 
        
            has(word) { return true; } 
        
          }

view raw bound Trie.js hosted with ❤ by GitHub

, which is TypeScript-transpiled as

  
          var Trie = /** @class */ (function () { 
        
              function Trie() { 
        
                  this.has = this.has.bind(this); 
        
              } 
        
              Trie.prototype.has = function (word) { return true; }; 
        
              return Trie; 
        
          }());

view raw transpiled bound Trie.js hosted with ❤ by GitHub

And printing the trie instance returned from useTrie will now show .has method.

  
          {...trie}  
        
          Object {has: function bound has()}

view raw trie now has, ".has" hosted with ❤ by GitHub

has is still added to the prototype, which might not be what you want and it's increasing the file size.

So this brings us to,

2. Using an arrow function expression

When you declare the `has` method using an arrow syntax, it's transpiled by Transcript as shown below.

  
          class TrieUsingArrow { 
        
            has = word => true; 
        
          }
        
          // Transpiled by TypeScript as
        
          var TrieUsingArrow = /** @class */ (function () { 
        
              function TrieUsingArrow() { 
        
                  this.has = function (word) { return true; }; 
        
              } 
        
              return TrieUsingArrow; 
        
          }());

view raw TrieUsingArrow.js hosted with ❤ by GitHub

You can see that it's same without has being assigned to the prototype.
And the console log will still show has as part of the trie instance returned from useTrieUsingArrow.

  
          {...trieUsingArrow}  
        
          Object {has: function ()}

view raw trieUsingArrow result hosted with ❤ by GitHub

🤦‍♂️ Why? Why? Why?

I recently released a new package @cshooks/usetrie and Nick Taylor generously provided an educational & thorough PR on how the code-base can be improved.

But not having a deep knowledge of TypeScript & Javascript, the following change caused an issue.

    -has = (wordToSearch: string, exactSearch: boolean = true): boolean => {
+has(wordToSearch: string, exactSearch: boolean = true): boolean {

view raw change in has.md hosted with ❤ by GitHub

FYI - [useTrie](https://github.com/cshooks/hooks/blob/master/packages/useTrie/src/index.ts#L218) is implemented as shown below.

  
          function useTrie(
        
            initialWords: Word[],
        
            isCaseInsensitive = true,
        
            getText: TextSelector = obj => obj
        
          ): ITrie {
        
            const trie = new Trie(initialWords, isCaseInsensitive, getText);
        
            const [state, dispatch] = React.useReducer(reducer, { trie, word: '' });
        
            // add/remove removed for brivity
        
            return { ...state.trie, add, remove };
        
          }

view raw prod.useTrie.tsx hosted with ❤ by GitHub

I was retro-fitting a mutable data structure and exposing it as a hook.

But it's not a good way as you can see between Paul Gray & Dan Abramov's tweets.

You have to make sure your class does not have methods that mutate it's internal state. Of course if your class has no internal state, it's just a bunch of static methods in disguise. So, I think it's a bad pattern :)
— Paul Gray (@PaulGrizzay) March 13, 2019

I think it’s legit for it to be stateful if you don’t read that state or use it for rendering. More like imperative things: conditional logging, debouncing API requests, managing d3 or similar objects.
— дэн (@dan_abramov) March 13, 2019

So be aware of the issue discussed above when you are extracting an imperative logic out of React.

🎉 Parting Words

I've paid handsomely for not following React way of doing things.
I hope you the gotcha & the workaround helped you understand what's going on behind the scenes.

You can play around with the TypeScript transpiler on the Playground page.
& the console log results in the Sandbox.

	class Trie {
	has(word) { return true; }
	}

	function useTrie() {
	const trie = React.useState(new Trie())[0];
	return { ...trie };
	}

	function App() {
	const trie = useTrie();
	console.log(`{...trie}`, { ...trie });
	return <div className="App">Nothing to see here</div>;
	}

	// console shows
	{...trie} Object {}

	class Trie {
	has(word) { return true; }
	}

	// Transpiled as
	var Trie = /** @class */ (function () {
	function Trie() {
	}
	Trie.prototype.has = function (word) { return true; };
	return Trie;
	}());

	class Trie {
	constructor() {
	this.has = this.has.bind(this);
	}
	has(word) { return true; }
	}

	class TrieUsingArrow {
	has = word => true;
	}

	// Transpiled by TypeScript as
	var TrieUsingArrow = /** @class */ (function () {
	function TrieUsingArrow() {
	this.has = function (word) { return true; };
	}
	return TrieUsingArrow;
	}());

	function useTrie(
	initialWords: Word[],
	isCaseInsensitive = true,
	getText: TextSelector = obj => obj
	): ITrie {
	const trie = new Trie(initialWords, isCaseInsensitive, getText);
	const [state, dispatch] = React.useReducer(reducer, { trie, word: '' });
	// add/remove removed for brivity
	return { ...state.trie, add, remove };
	}