Improve mount performance

Author: lttb

src/styled.js

@@ -22,6 +22,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
   const dynamicStyle = getDynamicStyles(elementStyle)
   const staticTagName = generateTagName(tagName)
 
+  const availableDynamicTagNames = []
+
   return class StyledElement extends PureComponent {
     static tagName: string = tagName
     static style: ComponentStyleType = elementStyle
@@ -34,8 +36,8 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
 
     constructor(props: StyledElementPropsType) {
       super(props)
-      if (!this.dynamicTagName) {
-        this.dynamicTagName = generateTagName(tagName)
+      if (!this.dynamicTagName && dynamicStyle) {
+        this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName)
       }
     }
 
@@ -46,15 +48,13 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
         this.staticSheet.addRule(staticTagName, elementStyle)
       }
 
-      if (dynamicStyle && !this.dynamicSheet.getRule(this.dynamicTagName)) {
-        this.dynamicSheet
-          .detach()
-          .addRule(this.dynamicTagName, dynamicStyle)
-        this.dynamicSheet
-          .update(this.dynamicTagName, this.props)
-          .attach()
-          .link()
+      if (!dynamicStyle) return
+
+      if (!this.dynamicSheet.getRule(this.dynamicTagName)) {
+        this.dynamicSheet.addRule(this.dynamicTagName, dynamicStyle)
       }
+
+      this.dynamicSheet.update(this.dynamicTagName, this.props)
     }
 
     componentWillReceiveProps(nextProps: StyledElementPropsType) {
@@ -63,6 +63,10 @@ const styled = ({tagName, elementStyle, mountSheets}: StyledArgs) => {
       }
     }
 
+    componentWillUnmount() {
+      availableDynamicTagNames.push(this.dynamicTagName)
+    }
+
     render() {
       if (!this.staticSheet) return null
 

src/tests/__snapshots__/index.spec.jsx.snap

@@ -1,26 +1,26 @@
 exports[`test renders correctly App with default Styled 1`] = `
 <div
-  className="div-14-0-9">
+  className="div-9-0-9">
   <header
-    className="header-15-0-10">
+    className="header-10-0-10">
     <h1
-      className="h1-18-0-11">
+      className="h1-13-0-11">
       Title
     </h1>
   </header>
   <section
-    className="section-16-0-12">
+    className="section-11-0-12">
     <button
-      className="button-19-0-13 button-24-0-14">
+      className="button-14-0-13 button-15-0-14">
       primitive test
     </button>
     <button
-      className="button-19-0-13 button-25-0-15">
+      className="button-14-0-13 button-16-0-15">
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-17-0-16">
+    className="section-12-0-16">
     Another section
   </section>
 </div>
@@ -39,11 +39,11 @@ exports[`test renders correctly App with default styled 1`] = `
   <section
     className="section-3-0-3">
     <button
-      className="button-6-0-4 button-11-0-5">
+      className="button-6-0-4 button-7-0-5">
       primitive test
     </button>
     <button
-      className="button-6-0-4 button-12-0-6">
+      className="button-6-0-4 button-8-0-6">
       dynamic primitive test
     </button>
   </section>
@@ -58,27 +58,27 @@ exports[`test renders correctly App with injectStyled 1`] = `
 <div
   className="root-0-17">
   <div
-    className="div-27-0-19">
+    className="div-17-0-19">
     <header
-      className="header-28-0-20">
+      className="header-18-0-20">
       <h1
-        className="h1-31-0-21">
+        className="h1-21-0-21">
         Title
       </h1>
     </header>
     <section
-      className="section-29-0-22">
+      className="section-19-0-22">
       <button
-        className="button-32-0-23 button-37-0-24">
+        className="button-22-0-23 button-23-0-24">
         primitive test
       </button>
       <button
-        className="button-32-0-23 button-38-0-25">
+        className="button-22-0-23 button-24-0-25">
         dynamic primitive test
       </button>
     </section>
     <section
-      className="section-30-0-26">
+      className="section-20-0-26">
       Another section
     </section>
   </div>