Restore instead of for performance. Move things out of the render loop

javierbyte · Dec 3, 2021 · 8f75316 · 8f75316
1 parent b7b54d7
commit 8f75316
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 86 deletions.
diff --git a/public/index.html b/public/index.html
@@ -27,6 +27,30 @@
     <meta property="og:image:height" content="900" />
   </head>
   <body>
+    <div class="bg" />
+    <div class="header">
+      <div style="flex: 1">
+        <h1>Emoji to Scale</h1>
+        <div style="margin-top: 8px">
+          <a href="https://github.com/javierbyte/emoji-to-scale">+ Info on Github</a>
+        </div>
+        <div style="margin-top: 8px">
+          <a href="https://twitter.com/intent/tweet?text=Visualize%20emojis%20to%20scale.%20The%20chicken%20is%20not%20bigger%20than%20the%20car%20anymore!%20%F0%9F%90%93%F0%9F%9A%97%0A%20http%3A//javier.xyz/emoji-to-scale/">
+            + Tweet this!
+          </a>
+        </div>
+      </div>
+      <a href="https://javier.xyz/">
+        <h1>by javierbyte</h1>
+      </a>
+    </div>
+
+    <div class="footer">
+      <h2>
+        Scroll <span style="font-size: 28px">↓</span>
+      </h2>
+    </div>
+
     <div id="root"></div>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-44329676-12"></script>
     <script>

diff --git a/src/app.jsx b/src/app.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, Fragment } from 'react';
+import { useEffect, useState } from 'react';
 import { getData } from './getData.js';
 
 const WIDTH = 300;
@@ -37,96 +37,68 @@ function App() {
   }, []);
 
   return (
-    <Fragment>
-      <div className="bg" />
-
-      <div className="header">
-        <div>
-          <h1>Emoji to Scale</h1>
-          <div style={{ marginTop: 8 }}>
-            <a href="https://github.com/javierbyte/emoji-to-scale">+ Info</a>
-          </div>
-          <div style={{ marginTop: 8 }}>
-            <a href="https://twitter.com/intent/tweet?text=Visualize%20emojis%20to%20scale.%20The%20chicken%20is%20not%20bigger%20than%20the%20car%20anymore!%20%F0%9F%90%93%F0%9F%9A%97%0A%20http%3A//javier.xyz/emoji-to-scale/">
-              + Tweet this!
-            </a>
-          </div>
-        </div>
-        <div style={{ flex: 1 }} />
-        <a href="https://javier.xyz/">
-          <h1>by javierbyte</h1>
-        </a>
-      </div>
-
-      <div className="footer">
-        <h2>
-          Scroll <span style={{ fontSize: 28 }}>↓</span>
-        </h2>
-      </div>
-
-      <div className="emoji-display">
-        {data.map(([emoji, size, label]) => {
-          const width = window.innerWidth;
-          let relativeDistance = compoundDistance - scroll;
-
-          if (relativeDistance < width / 2) {
-            relativeDistance =
-              relativeDistance * 0.25 + (0.75 * (relativeDistance + width * 0.5)) / 2;
-          }
-
-          compoundDistance += WIDTH;
-
-          if (relativeDistance < -WIDTH || relativeDistance > width) {
-            return null;
-          }
-
-          let emojisToScale = [Math.floor(scroll / WIDTH), Math.ceil(scroll / WIDTH)];
-
-          emojisToScale = emojisToScale
-            .map((idx) => {
-              if (idx < 0) return 0;
-              if (idx > data.length - 1) return data.length - 1;
-              return idx;
-            })
-            .map((idx) => data[idx]);
-
-          const floorCeilProgress = (scroll / WIDTH) % 1;
-          const floatScale =
-            floorCeilProgress * emojisToScale[1][1] + (1 - floorCeilProgress) * emojisToScale[0][1];
-
-          const calculatedScale = Math.min(size / floatScale, 1000);
-
-          let opacity = 1;
-          if (calculatedScale > 3) {
-            const diff = (calculatedScale - 3) / 8;
-            opacity = Math.max(1 - diff, 0);
-          }
-
-          return (
+    <div className="emoji-display">
+      {data.map(([emoji, size, label]) => {
+        const width = window.innerWidth;
+        let relativeDistance = compoundDistance - scroll;
+
+        if (relativeDistance < width / 2) {
+          relativeDistance =
+            relativeDistance * 0.25 + (0.75 * (relativeDistance + width * 0.5)) / 2;
+        }
+
+        compoundDistance += WIDTH;
+
+        if (relativeDistance < -WIDTH / 2 || relativeDistance > width - WIDTH / 2) {
+          return null;
+        }
+
+        let emojisToScale = [Math.floor(scroll / WIDTH), Math.ceil(scroll / WIDTH)];
+
+        emojisToScale = emojisToScale
+          .map((idx) => {
+            if (idx < 0) return 0;
+            if (idx > data.length - 1) return data.length - 1;
+            return idx;
+          })
+          .map((idx) => data[idx]);
+
+        const floorCeilProgress = (scroll / WIDTH) % 1;
+        const floatScale =
+          floorCeilProgress * emojisToScale[1][1] + (1 - floorCeilProgress) * emojisToScale[0][1];
+
+        const calculatedScale = Math.min(size / floatScale, 64);
+
+        let opacity = 1;
+        if (calculatedScale > 3) {
+          const diff = (calculatedScale - 3) / 8;
+          opacity = Math.max(1 - diff, 0);
+        }
+
+        return (
+          <div
+            className="emoji-container"
+            style={{
+              transform: `translatex(${relativeDistance}px)`
+              // left: `${relativeDistance}px`
+            }}
+            key={emoji}
+          >
             <div
-              className="emoji-container"
+              className="emoji"
               style={{
-                // transform: `translatex(${relativeDistance}px)`
-                left: `${relativeDistance}px`
+                opacity,
+                transform: `scale(${calculatedScale}) translateY(10%)`
               }}
-              key={emoji}
             >
-              <div
-                className="emoji"
-                style={{
-                  opacity,
-                  transform: `scale(${calculatedScale}) translateY(10%)`
-                }}
-              >
-                {emoji}
-              </div>
-              <div>{parseSize(size)}</div>
-              <div>{label}</div>
+              {emoji}
             </div>
-          );
-        })}
-      </div>
-    </Fragment>
+            <div>{parseSize(size)}</div>
+            <div>{label}</div>
+          </div>
+        );
+      })}
+    </div>
   );
 }