fix(lag): memoize some components

blockchain · Dec 7, 2021 · 87b78a5 · 87b78a5
1 parent 5dfbcb7
commit 87b78a5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 27 deletions.
diff --git a/...wallet-v4-frontend/src/modals/BuySell/CryptoSelection/CryptoSelector/CryptoItem/index.tsx b/...wallet-v4-frontend/src/modals/BuySell/CryptoSelection/CryptoSelector/CryptoItem/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { equals } from 'ramda'
 
@@ -8,18 +8,16 @@ import { RootState } from 'data/rootReducer'
 import { getData } from './selectors'
 import Success from './template.success'
 
-class CryptoItem extends React.Component<Props> {
-  shouldComponentUpdate = (nextProps) => !equals(this.props, nextProps)
-
-  render() {
-    return this.props.data.cata({
+const CryptoItem = memo(
+  (props: Props) =>
+    props.data.cata({
       Failure: () => null,
       Loading: () => null,
       NotAsked: () => null,
-      Success: (val) => <Success {...this.props} {...val} />
-    })
-  }
-}
+      Success: (val) => <Success {...props} {...val} />
+    }),
+  (prevProps, nextProps) => equals(prevProps, nextProps)
+)
 
 const mapStateToProps = (state: RootState, ownProps: OwnProps) => ({
   data: getData(state, ownProps)

diff --git a/...rontend/src/modals/BuySell/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx b/...rontend/src/modals/BuySell/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { equals } from 'ramda'
 import styled from 'styled-components'
 
@@ -65,11 +65,10 @@ const PlusMinusIconWrapper = styled.div`
 
 type Props = OwnProps & ParentOwnProps & SuccessStateType
 
-const Success = React.memo(
+const Success = memo(
   ({ coin, fiat, onClick, orderType, rates }: Props) => {
     const { coinfig } = window.coins[coin]
     const displayName = coinfig.name
-
     return (
       <CheckoutDisplayContainer
         data-e2e={`sb${coin}-${fiat}CurrencySelector`}

diff --git a/...let-v4-frontend/src/modals/BuySell/CryptoSelection/CryptoSelector/PriceMovement/index.tsx b/...let-v4-frontend/src/modals/BuySell/CryptoSelection/CryptoSelector/PriceMovement/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo, useEffect } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { equals } from 'ramda'
 import { bindActionCreators, Dispatch } from 'redux'
@@ -42,20 +42,18 @@ const getColorFromMovement = (movement: PriceMovementDirType) => {
   }
 }
 
-class PriceMovement extends React.Component<Props> {
-  componentDidMount() {
-    if (!Remote.Success.is(this.props.data)) {
-      const { coin } = this.props
-      this.props.miscActions.fetchPriceChange(coin, this.props.fiat || 'EUR', TimeRange.DAY)
-    }
-  }
-
-  shouldComponentUpdate = (nextProps) => !equals(this.props, nextProps)
+const PriceMovement = memo(
+  (props: Props) => {
+    useEffect(() => {
+      const { coin, data, fiat, miscActions } = props
+      if (!Remote.Success.is(data)) {
+        miscActions.fetchPriceChange(coin, fiat || 'EUR', TimeRange.DAY)
+      }
+    }, [props])
 
-  render() {
     return (
       <Container>
-        {this.props.data.cata({
+        {props.data.cata({
           Failure: () => null,
           Loading: () => <SkeletonRectangle height='12px' width='40px' />,
           NotAsked: () => null,
@@ -68,8 +66,9 @@ class PriceMovement extends React.Component<Props> {
         })}
       </Container>
     )
-  }
-}
+  },
+  (prevProps, nextProps) => equals(prevProps, nextProps)
+)
 
 const mapStateToProps = (state: RootState, ownProps: OwnProps) => ({
   data: getData(state, ownProps)