perf: use memo, fix quicklinks key err

src/components/modals/main/Main.jsx

@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { Suspense, lazy, useState } from 'react';
 
+import { memo } from 'react';
 import { MdClose } from 'react-icons/md';
 
 import Tabs from './tabs/backend/Tabs';
@@ -29,7 +30,7 @@ const renderLoader = (current) => (
   </Tabs>
 );
 
-export default function MainModal({ modalClose }) {
+function MainModal({ modalClose }) {
   const [currentTab, setCurrentTab] = useState(0);
 
   const changeTab = (type) => {
@@ -67,3 +68,5 @@ export default function MainModal({ modalClose }) {
     </div>
   );
 }
+
+export default memo(MainModal);

src/components/modals/main/marketplace/Items.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import TextField from '@mui/material/TextField';
-import React, { useState } from 'react';
+import React, { useState, memo } from 'react';
 import {
   MdAutoFixHigh,
   MdOutlineArrowForward,
@@ -12,7 +12,7 @@ import {
   MdSearch,
 } from 'react-icons/md';
 
-export default function Items({
+function Items({
   type,
   items,
   collection,
@@ -154,3 +154,5 @@ export default function Items({
     </>
   );
 }
+
+export default memo(Items);

src/components/modals/main/marketplace/Lightbox.jsx

@@ -1,6 +1,7 @@
+import { memo } from 'react';
 import variables from 'modules/variables';
 
-export default function Lightbox({ modalClose, img }) {
+function Lightbox({ modalClose, img }) {
   variables.stats.postEvent('modal', 'Opened lightbox');
 
   return (
@@ -12,3 +13,5 @@ export default function Lightbox({ modalClose, img }) {
     </>
   );
 }
+
+export default memo(Lightbox);

src/components/modals/main/marketplace/SideloadFailedModal.jsx

@@ -1,8 +1,9 @@
+import { memo } from 'react';
 import variables from 'modules/variables';
 import { MdClose } from 'react-icons/md';
 import Tooltip from '../../../helpers/tooltip/Tooltip';
 
-export default function SideloadFailedModal({ modalClose, reason }) {
+function SideloadFailedModal({ modalClose, reason }) {
   return (
     <div className="smallModal">
       <div className="shareHeader">
@@ -24,3 +25,5 @@ export default function SideloadFailedModal({ modalClose, reason }) {
     </div>
   );
 }
+
+export default memo(SideloadFailedModal);

src/components/modals/main/settings/ResetModal.jsx

@@ -1,9 +1,10 @@
+import { memo } from 'react';
 import variables from 'modules/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'modules/helpers/settings';
 import Tooltip from '../../../helpers/tooltip/Tooltip';
 
-export default function ResetModal({ modalClose }) {
+function ResetModal({ modalClose }) {
   const reset = () => {
     variables.stats.postEvent('setting', 'Reset');
     setDefaultSettings('reset');
@@ -43,3 +44,5 @@ export default function ResetModal({ modalClose }) {
     </div>
   );
 }
+
+export default memo(ResetModal);

src/components/modals/main/settings/SettingsItem.jsx

@@ -1,4 +1,6 @@
-export default function SettingsItem(props) {
+import { memo } from 'react';
+
+function SettingsItem(props) {
   return (
     <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
       <div className="content">
@@ -9,3 +11,5 @@ export default function SettingsItem(props) {
     </div>
   );
 }
+
+export default memo(SettingsItem);

src/components/modals/main/settings/sections/Appearance.jsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import variables from 'modules/variables';
 
 import Checkbox from '../Checkbox';
@@ -9,7 +11,7 @@ import SettingsItem from '../SettingsItem';
 
 import { values } from 'modules/helpers/settings/modals';
 
-export default function AppearanceSettings() {
+function AppearanceSettings() {
   return (
     <>
       <span className="mainTitle">
@@ -185,3 +187,5 @@ export default function AppearanceSettings() {
     </>
   );
 }
+
+export default memo(AppearanceSettings);

src/components/modals/main/settings/sections/Experimental.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
 import { TextField } from '@mui/material';
@@ -8,7 +8,7 @@ import EventBus from 'modules/helpers/eventbus';
 import { values } from 'modules/helpers/settings/modals';
 import SettingsItem from '../SettingsItem';
 
-export default function ExperimentalSettings() {
+function ExperimentalSettings() {
   const [eventType, setEventType] = useState();
   const [eventName, setEventName] = useState();
 
@@ -70,3 +70,5 @@ export default function ExperimentalSettings() {
     </>
   );
 }
+
+export default memo(ExperimentalSettings);

src/components/modals/main/settings/sections/Navbar.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 
-import { useState } from 'react';
+import { useState, memo } from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
@@ -8,7 +8,7 @@ import Dropdown from '../Dropdown';
 import SettingsItem from '../SettingsItem';
 import Header from '../Header';
 
-export default function Navbar() {
+function Navbar() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
@@ -86,3 +86,5 @@ export default function Navbar() {
     </>
   );
 }
+
+export default memo(Navbar);

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -161,7 +161,7 @@ export default class QuickLinks extends PureComponent {
         url + item.url.replace('https://', '').replace('http://', '') + (useProxy ? '.ico' : '');
 
       const link = (
-        <div className="messageMap">
+        <div className="messageMap" key={item.key}>
           <div className="icon">
             <img src={img} alt={item.name} draggable={false} style={{ height: '30px', width: '30px'}} />
           </div>

src/components/modals/main/settings/sections/background/CustomURLModal.jsx

@@ -1,9 +1,9 @@
 import variables from 'modules/variables';
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import { MdAdd, MdClose } from 'react-icons/md';
 import Tooltip from '../../../../../helpers/tooltip/Tooltip';
 
-export default function CustomURLModal({ modalClose, modalCloseOnly }) {
+function CustomURLModal({ modalClose, modalCloseOnly }) {
   const [url, setURL] = useState();
 
   return (
@@ -39,3 +39,5 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
     </div>
   );
 }
+
+export default memo(CustomURLModal);

src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx

@@ -1,7 +1,7 @@
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, memo } from 'react';
 const Analog = lazy(() => import('react-clock'));
 
-export default function ClockSkeleton() {
+function ClockSkeleton() {
   if (localStorage.getItem('timeType') === 'analogue') {
     return (
       <Suspense fallback={<></>}>
@@ -27,3 +27,5 @@ export default function ClockSkeleton() {
     return <span className="new-clock clock-container clockSkeleton">10:24</span>;
   }
 }
+
+export default memo(ClockSkeleton);

src/components/modals/main/settings/sections/overview_skeletons/Date.jsx

@@ -1,7 +1,11 @@
-export default function DateSkeleton() {
+import { memo } from 'react';
+
+function DateSkeleton() {
   return (
     <span className="date">
       Thursday January 1st
     </span>
   );
 }
+
+export default memo(DateSkeleton);

src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx

@@ -1,3 +1,7 @@
-export default function GreetingSkeleton() {
+import { memo } from 'react';
+
+function GreetingSkeleton() {
   return <span className="greeting">Good Morning</span>;
 }
+
+export default memo(GreetingSkeleton);

src/components/modals/main/settings/sections/overview_skeletons/Message.jsx

@@ -1,4 +1,6 @@
-export default function MessageSkeleton() {
+import { memo } from 'react';
+
+function MessageSkeleton() {
   return (
     <h2 className="message">
       <span>
@@ -8,3 +10,5 @@ export default function MessageSkeleton() {
     </h2>
   );
 }
+
+export default memo(MessageSkeleton);

src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx

@@ -1,7 +1,8 @@
+import { memo } from 'react';
 import { FaDiscord, FaTwitter } from 'react-icons/fa';
 import { SiKofi, SiPatreon } from 'react-icons/si';
 
-export default function QuicklinksSkeleton() {
+function QuicklinksSkeleton() {
   return (
     <div className="quickLinksSkeleton">
       <div className="circles">
@@ -21,3 +22,5 @@ export default function QuicklinksSkeleton() {
     </div>
   );
 }
+
+export default memo(QuicklinksSkeleton);

src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx

@@ -1,6 +1,7 @@
+import { memo } from 'react';
 import { MdPerson } from 'react-icons/md';
 
-export default function QuoteSkeleton() {
+function QuoteSkeleton() {
   return (
     <div className="quoteSkeleton">
       <span className="subtitle">"Never gonna give you up"</span>
@@ -16,3 +17,5 @@ export default function QuoteSkeleton() {
     </div>
   );
 }
+
+export default memo(QuoteSkeleton);

src/components/modals/main/settings/sections/quicklinks/AddModal.jsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
 import variables from 'modules/variables';
 
-export default function AddModal({ urlError, addLink, closeModal, edit, editData, editLink }) {
+function AddModal({ urlError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');
   const [icon, setIcon] = useState(edit ? editData.url : '');
@@ -55,3 +55,5 @@ export default function AddModal({ urlError, addLink, closeModal, edit, editData
     </div>
   );
 }
+
+export default memo(AddModal);

src/components/modals/main/tabs/Addons.jsx

@@ -1,10 +1,11 @@
 import variables from 'modules/variables';
+import { memo } from 'react';
 import Tabs from './backend/Tabs';
 
 import Added from '../marketplace/sections/Added';
 import Create from '../marketplace/sections/Create';
 
-export default function Addons(props) {
+function Addons(props) {
   return (
     <Tabs changeTab={(type) => props.changeTab(type)} current="addons">
       <div label={variables.getMessage('modals.main.addons.added')} name="added">
@@ -16,3 +17,5 @@ export default function Addons(props) {
     </Tabs>
   );
 }
+
+export default memo(Addons);

src/components/modals/main/tabs/Marketplace.jsx

@@ -1,9 +1,11 @@
 import variables from 'modules/variables';
+import { memo } from 'react';
+
 import Tabs from './backend/Tabs';
 
 import MarketplaceTab from '../marketplace/sections/Marketplace';
 
-export default function Marketplace(props) {
+function Marketplace(props) {
   return (
     <Tabs changeTab={(type) => props.changeTab(type)} current="marketplace">
       <div label={variables.getMessage('modals.main.marketplace.all')} name="all">
@@ -27,3 +29,5 @@ export default function Marketplace(props) {
     </Tabs>
   );
 }
+
+export default memo(Marketplace);

src/components/modals/main/tabs/Settings.jsx

@@ -1,4 +1,6 @@
 import variables from 'modules/variables';
+import { memo } from 'react';
+
 import Tabs from './backend/Tabs';
 
 import Overview from '../settings/sections/Overview';
@@ -20,7 +22,7 @@ import Experimental from '../settings/sections/Experimental';
 import Changelog from '../settings/sections/Changelog';
 import About from '../settings/sections/About';
 
-export default function Settings(props) {
+function Settings(props) {
   return (
     <Tabs changeTab={(type) => props.changeTab(type)} current="settings">
       <div label={variables.getMessage('modals.main.marketplace.product.overview')} name="order">
@@ -113,3 +115,5 @@ export default function Settings(props) {
     </Tabs>
   );
 }
+
+export default memo(Settings);

src/components/modals/welcome/ProgressBar.jsx

@@ -1,4 +1,6 @@
-export default function ProgressBar({ count, currentTab, switchTab }) {
+import { memo } from 'react';
+
+function ProgressBar({ count, currentTab, switchTab }) {
   return (
     <div className="progressbar">
       {count.map((num) => {
@@ -14,3 +16,5 @@ export default function ProgressBar({ count, currentTab, switchTab }) {
     </div>
   );
 }
+
+export default memo(ProgressBar);