useEffect -> useMemo

src/Rankings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
@@ -304,7 +304,7 @@ export default function Rankings() {
     setPlayers(data as Player[]);
   }
 
-  useEffect(() => {
+  useMemo(() => {
     loadPlayers();
   }, []);
 
@@ -314,21 +314,21 @@ export default function Rankings() {
       {user.length === 1 && (
         <>
           <div className="container navbar">
-              <button
-                className="tablink"
-                id="ChemistryButton"
-                onClick={() => openPage("Chemistry", "aliceblue")}
-              >
-                🧪 Chemistry
-              </button>
-              <button
-                className="tablink"
-                id="MVPButton"
-                onClick={() => openPage("MVP", "aliceblue")}
-              >
-                🏆 MVP
-              </button>
-            </div>
+            <button
+              className="tablink"
+              id="ChemistryButton"
+              onClick={() => openPage("Chemistry", "aliceblue")}
+            >
+              🧪 Chemistry
+            </button>
+            <button
+              className="tablink"
+              id="MVPButton"
+              onClick={() => openPage("MVP", "aliceblue")}
+            >
+              🏆 MVP
+            </button>
+          </div>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />