perf: use memo, fix quicklinks key err

src/components/helpers/carousel/Carousel.jsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
 import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md';
 import useEmblaCarousel from 'embla-carousel-react';
 import Autoplay from 'embla-carousel-autoplay';
 
 import './carousel.scss';
 
-export default function EmblaCarousel({ data }) {
+function EmblaCarousel({ data }) {
   const autoplay = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement),
   );
@@ -79,3 +79,5 @@ export default function EmblaCarousel({ data }) {
     </div>
   );
 }
+
+export default memo(EmblaCarousel);

src/components/helpers/notification/notification.jsx

@@ -1,7 +1,9 @@
+import { memo } from 'react';
+
 import variables from 'modules/variables';
 import './preview.scss';
 
-export default function Notification(props) {
+function Notification(props) {
   return (
     <div className="preview-mode">
       <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
@@ -12,3 +14,5 @@ export default function Notification(props) {
     </div>
   );
 }
+
+export default memo(Notification);

src/components/helpers/preview/Preview.jsx

@@ -1,7 +1,8 @@
+import { memo } from 'react';
 import variables from 'modules/variables';
 import './preview.scss';
 
-export default function Preview(props) {
+function Preview(props) {
   return (
     <div className="preview-mode">
       <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
@@ -12,3 +13,5 @@ export default function Preview(props) {
     </div>
   );
 }
+
+export default memo(Preview);

src/components/helpers/sharemodal/ShareModal.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import variables from 'modules/variables';
 import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
 import { FaTwitter, FaFacebookF } from 'react-icons/fa';
@@ -8,7 +9,7 @@ import { toast } from 'react-toastify';
 
 import './sharemodal.scss';
 
-export default function ShareModal({ modalClose, data }) {
+function ShareModal({ modalClose, data }) {
   const url = variables.constants.MARKETPLACE_URL + '/share/' + (btoa(data.api_name) || '');
 
   const copyLink = () => {
@@ -111,3 +112,5 @@ export default function ShareModal({ modalClose, data }) {
     </div>
   );
 }
+
+export default memo(ShareModal);

src/components/helpers/tooltip/Tooltip.jsx

@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import './tooltip.scss';
 
-export default function Tooltip({ children, title, style, placement, subtitle }) {
+function Tooltip({ children, title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
     placement: placement || 'bottom',
@@ -39,3 +39,5 @@ export default function Tooltip({ children, title, style, placement, subtitle })
     </div>
   );
 }
+
+export default memo(Tooltip);

src/components/helpers/tooltip/infoTooltip.jsx

@@ -1,12 +1,12 @@
 import variables from 'modules/variables';
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
 import { MdClose, MdInfo, MdOpenInNew } from 'react-icons/md';
 import Tooltip from './Tooltip';
 
 import './tooltip.scss';
 
-export default function InfoTooltip({ title, style, placement, subtitle }) {
+function InfoTooltip({ title, style, placement, subtitle }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
     placement: placement || 'top-start',
@@ -43,3 +43,5 @@ export default function InfoTooltip({ title, style, placement, subtitle }) {
     </div>
   );
 }
+
+export default memo(InfoTooltip);

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);

src/components/widgets/background/PhotoInformation.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import Favourite from './Favourite';
 import {
   MdInfo,
@@ -34,7 +34,7 @@ const downloadImage = async (info) => {
   variables.stats.postEvent('feature', 'Background download');
 };
 
-export default function PhotoInformation({ info, url, api }) {
+function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
   const [usePhotoMap, setPhotoMap] = useState(false);
@@ -295,3 +295,5 @@ export default function PhotoInformation({ info, url, api }) {
     </div>
   );
 }
+
+export default memo(PhotoInformation);

src/components/widgets/navbar/Notes.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { PureComponent, memo } from 'react';
 import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
 import { useFloating, shift } from '@floating-ui/react-dom';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
@@ -144,7 +144,7 @@ class Notes extends PureComponent {
   }
 }
 
-export default function NotesWrapper() {
+function NotesWrapper() {
   const { x, y, reference, floating, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
@@ -160,3 +160,5 @@ export default function NotesWrapper() {
     />
   );
 }
+
+export default memo(NotesWrapper);

src/components/widgets/navbar/Todo.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent } from 'react';
+import { PureComponent, memo } from 'react';
 import {
   MdChecklist,
   MdPushPin,
@@ -211,7 +211,7 @@ class Todo extends PureComponent {
   }
 }
 
-export default function TodoWrapper() {
+function TodoWrapper() {
   const { x, y, reference, floating, strategy } = useFloating({
     placement: 'bottom',
     middleware: [shift()],
@@ -221,3 +221,5 @@ export default function TodoWrapper() {
     <Todo todoRef={reference} floatRef={floating} position={strategy} xPosition={x} yPosition={y} />
   );
 }
+
+export default memo(TodoWrapper);

src/components/widgets/weather/Expanded.jsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';
 import { MdDisabledVisible } from 'react-icons/md';
 
@@ -6,7 +8,7 @@ import WindDirectionIcon from './WindDirectionIcon';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
-export default function Expanded({ state, weatherType, variables }) {
+function Expanded({ state, weatherType, variables }) {
   const enabled = (setting) => {
     return (localStorage.getItem(setting) === 'true' && weatherType >= 3) || weatherType === '3';
   };
@@ -107,3 +109,5 @@ export default function Expanded({ state, weatherType, variables }) {
     </div>
   );
 }
+
+export default memo(Expanded);

src/components/widgets/weather/WeatherIcon.jsx

@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import {
   WiDaySunny,
   WiNightClear,
@@ -13,7 +15,7 @@ import {
   WiFog,
 } from 'react-icons/wi';
 
-export default function WeatherIcon({ name }) {
+function WeatherIcon({ name }) {
   // name is the openweathermap icon name, see https://openweathermap.org/weather-conditions
   switch (name) {
     case '01d':
@@ -50,3 +52,5 @@ export default function WeatherIcon({ name }) {
       return null;
   }
 }
+
+export default memo(WeatherIcon);

src/components/widgets/weather/WindDirectionIcon.jsx

@@ -1,3 +1,6 @@
+
+import { memo } from 'react';
+
 import {
   WiDirectionDownLeft,
   WiDirectionDownRight,
@@ -10,7 +13,7 @@ import {
 } from 'react-icons/wi';
 
 // degrees are imported because of a potential bug, IDK what causes it, but now it is fixed
-export default function WindDirectionIcon({ degrees }) {
+function WindDirectionIcon({ degrees }) {
   // convert the number OpenWeatherMap gives us to the closest direction or something
   const directions = [
     'North',
@@ -46,3 +49,5 @@ export default function WindDirectionIcon({ degrees }) {
       return null;
   }
 }
+
+export default memo(WindDirectionIcon);