Spootify

.gitignore

@@ -14,6 +14,7 @@ node_modules
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

rocket-ship/package.json

@@ -2,13 +2,14 @@
   "name": "rocket-ship",
   "version": "1.0.0",
   "engines": {
-    "node" : ">= 15.0.0"
+    "node": ">= 15.0.0"
   },
   "dependencies": {
-    "sass": "^1.43.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3"
+    "react-scripts": "^5.0.1",
+    "sass": "^1.43.4",
+    "shallow-equal": "^1.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

rocket-ship/src/routes/LaunchPad/components/LaunchPad.js

@@ -4,11 +4,13 @@ import '../styles/_launchpad.scss';
 
 export default function LaunchPad() {
   const [, triggerRerender] = useState(Date.now());
-  
+
   useEffect(() => {
-    setInterval(() => { triggerRerender(Date.now()); }, 500);
-  }, [])
-
+    setInterval(() => {
+      triggerRerender(Date.now());
+    }, 500);
+  }, []);
+
   return (
     <div className="launchpad">
       <FunctionalRocket />

rocket-ship/src/routes/LaunchPad/components/Rocket/components/Rocket.js

@@ -1,21 +1,26 @@
-import React, { useState, Component } from 'react';
+import React, { useState, Component, memo } from 'react';
+import { shallowEqualObjects as _isEqual } from 'shallow-equal';
 import RocketCore from './RocketCore';
 
-export function FunctionalRocket() {
+export const FunctionalRocket = memo(() => {
   const [initialLaunchTime] = useState(Date.now());
 
   return <RocketCore initialLaunchTime={initialLaunchTime} />;
-}
+});
 
 export class ClassRocket extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      initialLaunchTime: Date.now()
+      initialLaunchTime: Date.now(),
     };
   }
 
+  shouldComponentUpdate(nextProps) {
+    return !_isEqual(nextProps, this.props);
+  }
+
   render() {
     const { initialLaunchTime } = this.state;
 

rocket-ship/src/routes/LaunchPad/components/Rocket/components/RocketCore.js

@@ -9,33 +9,34 @@ function timeToPositionPercent(startTime) {
   const now = Date.now();
   const timeDiff = now - startTime;
 
-  if (timeDiff >= MS_TO_TAKEOFF) { return FINAL_POSITION_BOTTOM_VAL; }
+  if (timeDiff >= MS_TO_TAKEOFF) {
+    return FINAL_POSITION_BOTTOM_VAL;
+  }
 
   return `calc(300px + ${((timeDiff / MS_TO_TAKEOFF) * 100).toFixed(0)}%)`;
 }
 
 function generateEmptyListEls(quantity) {
-  return [...Array(quantity)].map(() => <li />);
+  return [...Array(quantity)].map((_, idx) => <li key={idx} />);
 }
 
 export default function RocketCore({ initialLaunchTime }) {
   return (
     <>
-      <div className="rocket" style={{ bottom: timeToPositionPercent(initialLaunchTime) }}>
+      <div
+        className="rocket"
+        style={{ bottom: timeToPositionPercent(initialLaunchTime) }}
+      >
         <div className="rocket__body">
-          <div className="rocket__body__main"/>
-          <div className="rocket__body__fin rocket__body__fin__left"/>
-          <div className="rocket__body__fin rocket__body__fin__right"/>
-          <div className="rocket__body__window"/>
+          <div className="rocket__body__main" />
+          <div className="rocket__body__fin rocket__body__fin__left" />
+          <div className="rocket__body__fin rocket__body__fin__right" />
+          <div className="rocket__body__window" />
         </div>
-        <div className="rocket__exhaust__flame"/>
-        <ul className="rocket__exhaust__fumes">
-          {generateEmptyListEls(9)}
-        </ul>
+        <div className="rocket__exhaust__flame" />
+        <ul className="rocket__exhaust__fumes">{generateEmptyListEls(9)}</ul>
       </div>
-      <ul className="stars">
-        {generateEmptyListEls(7)}
-      </ul>
+      <ul className="stars">{generateEmptyListEls(7)}</ul>
     </>
   );
 }