memoize main components

memoize currency filter

src/components/MainCointainer.jsx

@@ -1,4 +1,4 @@
-import React,{ Suspense, lazy, useState, useEffect }  from 'react';
+import React,{ Suspense, lazy, useState, useEffect, memo }  from 'react';
 import { Route, Link, Switch, withRouter } from 'react-router-dom'
 import useWindowScrollPosition from '@rehooks/window-scroll-position'
 import PropTypes from 'prop-types';
@@ -387,5 +387,5 @@ PersistentDrawerLeft.propTypes = {
   children: PropTypes.node
 };
 
-const DrawerWithRouter = withRouter(PersistentDrawerLeft)
+const DrawerWithRouter = withRouter(memo(PersistentDrawerLeft))
 export default DrawerWithRouter

src/components/base/CurrencySelect.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react'
+import React, { useContext, useState, useEffect, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import TextField from '@material-ui/core/TextField'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -25,10 +25,10 @@ CurrencySelect.propTypes = {
 }
 
 const orderCurrencies = (currencies, balances, publishing) => {
+  if (!currencies) return
   if (publishing) {
-    const temp = [...currencies]
     let weth = currencies.findIndex(e => e.label === 'WETH')
-    temp[0] = temp[weth]
+    const temp = [currencies[weth], ...currencies.slice(1)]
     const dedupe = uniqBy(e => e.value)
     const removeNils = filter(e => !isNil(e))
     const process = compose(removeNils, dedupe)
@@ -89,6 +89,11 @@ function CurrencySelect({
     if (account && showBalances && currencies) updateBalancesAllowances()
   }, [account, currencies])
 
+  const filteredCurrencies = useMemo(
+    () => orderCurrencies(currencies, accountBalances, publishing),
+    [currencies, accountBalances, publishing]
+  )
+
   return (
     <TextField
       className={className}
@@ -103,7 +108,7 @@ function CurrencySelect({
       onBlur={onBlur}
       value={value || ''}
     >
-      {!!currencies && orderCurrencies(currencies, accountBalances, publishing).map((option, idx) => (
+      {!!currencies && filteredCurrencies.map((option, idx) => (
         <MenuItem style={{display: 'flex', alignItems: 'center'}} key={option.value} value={option.value}>
           <div style={{display: 'flex', alignItems: 'center'}}>
             {option.icon || <img

src/components/projects/CreateProject.jsx

@@ -1,5 +1,5 @@
 /*eslint complexity: ["error", 25]*/
-import React, { createRef, useState, useContext } from 'react'
+import React, { createRef, useState, useContext, memo } from 'react'
 import { Formik } from 'formik'
 import classnames from 'classnames'
 import ReactMarkdown from 'react-markdown'
@@ -514,4 +514,4 @@ function CreateProject({ classes, history }) {
 }
 
 const StyledProject = withStyles(styles)(CreateProject)
-export default withRouter(StyledProject)
+export default withRouter(memo(StyledProject))

src/components/projects/FundProject.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useMemo, useEffect } from 'react'
+import React, { useContext, useState, useMemo, useEffect, memo } from 'react'
 import { Formik } from 'formik'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
@@ -357,4 +357,4 @@ function FundProject({ match, history, location: { search } }) {
   )
 }
 
-export default FundProject
+export default memo(FundProject)

src/components/projects/ListProjects.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useState } from 'react'
+import React, { Fragment, useContext, useState, memo } from 'react'
 import useWindowSize from '@rehooks/window-size'
 import { Link } from 'react-router-dom'
 import Typography from '@material-ui/core/Typography'
@@ -190,4 +190,4 @@ function ListProjects() {
   )
 }
 
-export default ListProjects
+export default memo(ListProjects)