diff --git a/src/components/AccountBalance/AccountBalance.container.js b/src/components/AccountBalance/AccountBalance.container.js
deleted file mode 100644
index 3c20ecc38..000000000
--- a/src/components/AccountBalance/AccountBalance.container.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { compose } from 'redux'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import { withTranslation } from 'react-i18next'
-
-import {
-  refresh,
-  setParams,
-  fetchBalance,
-} from 'state/accountBalance/actions'
-import {
-  getEntries,
-  getTimeframe,
-  getPageLoading,
-  getDataReceived,
-  getCurrentFetchParams,
-  getIsUnrealizedProfitExcluded,
-} from 'state/accountBalance/selectors'
-import { getIsSyncRequired } from 'state/sync/selectors'
-
-import AccountBalance from './AccountBalance'
-
-const mapStateToProps = state => ({
-  currentFetchParams: getCurrentFetchParams(state),
-  dataReceived: getDataReceived(state),
-  entries: getEntries(state),
-  isSyncRequired: getIsSyncRequired(state),
-  isUnrealizedProfitExcluded: getIsUnrealizedProfitExcluded(state),
-  pageLoading: getPageLoading(state),
-  timeframe: getTimeframe(state),
-})
-
-const mapDispatchToProps = {
-  fetchData: fetchBalance,
-  refresh,
-  setParams,
-}
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withTranslation('translations'),
-  withRouter,
-)(AccountBalance)
diff --git a/src/components/AccountBalance/AccountBalance.js b/src/components/AccountBalance/AccountBalance.js
index 2875cc91d..6dd6f82a7 100644
--- a/src/components/AccountBalance/AccountBalance.js
+++ b/src/components/AccountBalance/AccountBalance.js
@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
+import React, { useEffect, useMemo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
 import { Card, Elevation } from '@blueprintjs/core'
 import _sortBy from 'lodash/sortBy'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
@@ -19,124 +20,113 @@ import RefreshButton from 'ui/RefreshButton'
 import TimeFrameSelector from 'ui/TimeFrameSelector'
 import parseChartData from 'ui/Charts/Charts.helpers'
 import UnrealizedProfitSelector from 'ui/UnrealizedProfitSelector'
-import queryConstants from 'state/query/constants'
-import { checkFetch, checkInit } from 'state/utils'
-
-const TYPE = queryConstants.MENU_ACCOUNT_BALANCE
-
-class AccountBalance extends PureComponent {
-  static propTypes = {
-    currentFetchParams: PropTypes.shape({
-      timeframe: PropTypes.string,
-      isUnrealizedProfitExcluded: PropTypes.bool,
-    }),
-    dataReceived: PropTypes.bool.isRequired,
-    entries: PropTypes.arrayOf(PropTypes.shape({
-      mts: PropTypes.number,
-      USD: PropTypes.number,
-    })),
-    isUnrealizedProfitExcluded: PropTypes.bool.isRequired,
-    pageLoading: PropTypes.bool.isRequired,
-    refresh: PropTypes.func.isRequired,
-    setParams: PropTypes.func.isRequired,
-    t: PropTypes.func.isRequired,
-    timeframe: PropTypes.string.isRequired,
-  }
-
-  static defaultProps = {
-    currentFetchParams: {},
-    entries: [],
-  }
+import {
+  refresh,
+  setParams,
+  fetchBalance,
+} from 'state/accountBalance/actions'
+import {
+  getEntries,
+  getTimeframe,
+  getPageLoading,
+  getDataReceived,
+  getCurrentTimeFrame,
+  getIsUnrealizedProfitExcluded,
+} from 'state/accountBalance/selectors'
+import { getTimeRange } from 'state/timeRange/selectors'
+import { getIsSyncRequired, getIsFirstSyncing } from 'state/sync/selectors'
 
-  componentDidMount() {
-    checkInit(this.props, TYPE)
-  }
+const AccountBalance = () => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+  const entries = useSelector(getEntries)
+  const timeFrame = useSelector(getTimeframe)
+  const timeRange = useSelector(getTimeRange)
+  const pageLoading = useSelector(getPageLoading)
+  const dataReceived = useSelector(getDataReceived)
+  const isFirstSync = useSelector(getIsFirstSyncing)
+  const isSyncRequired = useSelector(getIsSyncRequired)
+  const currTimeFrame = useSelector(getCurrentTimeFrame)
+  const isLoading = isFirstSync || (!dataReceived && pageLoading)
+  const isProfitExcluded = useSelector(getIsUnrealizedProfitExcluded)
+  const shouldFetchAccountBalance = !dataReceived && !pageLoading && !isSyncRequired
 
-  componentDidUpdate(prevProps) {
-    checkFetch(prevProps, this.props, TYPE)
-  }
+  useEffect(() => {
+    if (shouldFetchAccountBalance) dispatch(fetchBalance())
+  }, [timeRange, shouldFetchAccountBalance])
 
-  handleTimeframeChange = (timeframe) => {
-    const { setParams } = this.props
-    setParams({ timeframe })
-  }
+  const handleTimeframeChange = useCallback((timeframe) => {
+    dispatch(setParams({ timeframe }))
+  }, [dispatch, setParams])
 
-  handleUnrealizedProfitChange = (isUnrealizedProfitExcluded) => {
-    const { setParams } = this.props
-    setParams({ isUnrealizedProfitExcluded })
-  }
+  const handleUnrealizedProfitChange = useCallback((isUnrealizedProfitExcluded) => {
+    dispatch(setParams({ isUnrealizedProfitExcluded }))
+  }, [dispatch, setParams])
 
-  render() {
-    const {
-      currentFetchParams: { timeframe: currTimeframe },
-      dataReceived,
-      entries,
-      isUnrealizedProfitExcluded,
-      pageLoading,
-      refresh,
-      t,
-      timeframe,
-    } = this.props
+  const onRefresh = useCallback(() => {
+    dispatch(refresh())
+  }, [dispatch, refresh])
 
-    const { chartData, presentCurrencies } = parseChartData({
+  const { chartData, presentCurrencies } = useMemo(
+    () => parseChartData({
+      timeframe: currTimeFrame,
       data: _sortBy(entries, ['mts']),
-      timeframe: currTimeframe,
-    })
+    }), [currTimeFrame, entries],
+  )
 
-    let showContent
-    if (!dataReceived && pageLoading) {
-      showContent = <Loading />
-    } else if (isEmpty(entries)) {
-      showContent = <NoData />
-    } else {
-      showContent = (
-        <Chart
-          data={chartData}
-          dataKeys={presentCurrencies}
-        />
-      )
-    }
-    return (
-      <Card
-        elevation={Elevation.ZERO}
-        className='col-lg-12 col-md-12 col-sm-12 col-xs-12'
-      >
-        <SectionHeader>
-          <SectionHeaderTitle>
-            {t('accountbalance.title')}
-          </SectionHeaderTitle>
-          <SectionHeaderRow>
-            <SectionHeaderItem>
-              <SectionHeaderItemLabel>
-                {t('selector.filter.date')}
-              </SectionHeaderItemLabel>
-              <TimeRange className='section-header-time-range' />
-            </SectionHeaderItem>
-            <SectionHeaderItem>
-              <SectionHeaderItemLabel>
-                {t('selector.select')}
-              </SectionHeaderItemLabel>
-              <TimeFrameSelector
-                value={timeframe}
-                onChange={this.handleTimeframeChange}
-              />
-            </SectionHeaderItem>
-            <SectionHeaderItem>
-              <SectionHeaderItemLabel>
-                {t('selector.unrealized-profits.title')}
-              </SectionHeaderItemLabel>
-              <UnrealizedProfitSelector
-                value={isUnrealizedProfitExcluded}
-                onChange={this.handleUnrealizedProfitChange}
-              />
-            </SectionHeaderItem>
-            <RefreshButton onClick={refresh} />
-          </SectionHeaderRow>
-        </SectionHeader>
-        {showContent}
-      </Card>
+  let showContent
+  if (isLoading) {
+    showContent = <Loading />
+  } else if (isEmpty(entries)) {
+    showContent = <NoData />
+  } else {
+    showContent = (
+      <Chart
+        data={chartData}
+        dataKeys={presentCurrencies}
+      />
     )
   }
+  return (
+    <Card
+      elevation={Elevation.ZERO}
+      className='col-lg-12 col-md-12 col-sm-12 col-xs-12'
+    >
+      <SectionHeader>
+        <SectionHeaderTitle>
+          {t('accountbalance.title')}
+        </SectionHeaderTitle>
+        <SectionHeaderRow>
+          <SectionHeaderItem>
+            <SectionHeaderItemLabel>
+              {t('selector.filter.date')}
+            </SectionHeaderItemLabel>
+            <TimeRange className='section-header-time-range' />
+          </SectionHeaderItem>
+          <SectionHeaderItem>
+            <SectionHeaderItemLabel>
+              {t('selector.select')}
+            </SectionHeaderItemLabel>
+            <TimeFrameSelector
+              value={timeFrame}
+              onChange={handleTimeframeChange}
+            />
+          </SectionHeaderItem>
+          <SectionHeaderItem>
+            <SectionHeaderItemLabel>
+              {t('selector.unrealized-profits.title')}
+            </SectionHeaderItemLabel>
+            <UnrealizedProfitSelector
+              value={isProfitExcluded}
+              onChange={handleUnrealizedProfitChange}
+            />
+          </SectionHeaderItem>
+          <RefreshButton onClick={onRefresh} />
+        </SectionHeaderRow>
+      </SectionHeader>
+      {showContent}
+    </Card>
+  )
 }
 
 export default AccountBalance
diff --git a/src/components/AccountBalance/index.js b/src/components/AccountBalance/index.js
index c5439cc8d..b2e52557f 100644
--- a/src/components/AccountBalance/index.js
+++ b/src/components/AccountBalance/index.js
@@ -1 +1 @@
-export { default } from './AccountBalance.container'
+export { default } from './AccountBalance'