Cache newSymbol created Symbols

The observer decorator created 2 Symbols for each decorated component
instead of reusing the Symbols for props and state that was previously
created

src/utils/utils.js

@@ -5,7 +5,7 @@ export function isStateless(component) {
 }
 
 let symbolId = 0
-export function newSymbol(name) {
+function createSymbol(name) {
     if (typeof Symbol === "function") {
         return Symbol(name)
     }
@@ -14,6 +14,14 @@ export function newSymbol(name) {
     return symbol
 }
 
+const createdSymbols = {}
+export function newSymbol(name) {
+    if (!createdSymbols[name]) {
+        createdSymbols[name] = createSymbol(name)
+    }
+    return createdSymbols[name]
+}
+
 const mobxMixins = newSymbol("patchMixins")
 const mobxPatchedDefinition = newSymbol("patchedDefinition")
 

test/no-symbol.test.js → test/symbol.test.js

@@ -3,6 +3,7 @@ delete global.Symbol
 import React, { Component } from "react"
 import { observer } from "../src"
 import { asyncReactDOMRender, createTestRoot } from "./"
+import { newSymbol } from "../src/utils/utils"
 
 const testRoot = createTestRoot()
 
@@ -16,3 +17,10 @@ test("work without Symbol", async () => {
     )
     await asyncReactDOMRender(<Component1 />, testRoot)
 })
+
+test("cache newSymbol created Symbols", () => {
+    const symbol1 = newSymbol("name")
+    const symbol2 = newSymbol("name")
+
+    expect(symbol1).toEqual(symbol2)
+})