From 9468513389c980677d526ca08e8b5ce602b9dbab Mon Sep 17 00:00:00 2001
From: Richard <richardizip@gmail.com>
Date: Wed, 7 Apr 2021 08:56:50 +0200
Subject: [PATCH] Memoized useActions

* replace unnecessary `useRef` in delegatePage
---
 .../components/pages/delegations/delegatePage.tsx   | 13 ++++---------
 app/frontend/helpers/connect.ts                     |  6 +++++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/frontend/components/pages/delegations/delegatePage.tsx b/app/frontend/components/pages/delegations/delegatePage.tsx
index d8e8f60454..f70495eaa1 100644
--- a/app/frontend/components/pages/delegations/delegatePage.tsx
+++ b/app/frontend/components/pages/delegations/delegatePage.tsx
@@ -139,25 +139,20 @@ const Delegate = ({withAccordion, title}: Props): h.JSX.Element => {
   )
   const handleOnStopTyping = useHandleOnStopTyping()
 
-  // TODO: this reference always changes inside "useEffect" which causes infite loop.
-  // Till this is investigated, this workaround is used instead of "eslint-disable-..."
-  const _updateStakePoolIdentifier = useRef(updateStakePoolIdentifier)
-  const _resetStakePoolIndentifier = useRef(resetStakePoolIndentifier)
-
   const [fieldValue, setFieldValue] = useState('')
   const [error, setError] = useState<Error>(null)
 
   const handleInputValidation = useCallback(
     (value: string) => {
       if (!value) {
-        _resetStakePoolIndentifier.current()
+        resetStakePoolIndentifier()
         setError(null)
       } else {
         const {poolHash, error} = validateInput(value, validStakepoolDataProvider)
         if (!error) {
-          _updateStakePoolIdentifier.current(poolHash)
+          updateStakePoolIdentifier(poolHash)
         } else {
-          _resetStakePoolIndentifier.current()
+          resetStakePoolIndentifier()
         }
         setError(error)
       }
@@ -168,7 +163,7 @@ const Delegate = ({withAccordion, title}: Props): h.JSX.Element => {
       using hybrid solution involving `updateStakePoolIdentifier` (should be later removed)
       */
     },
-    [validStakepoolDataProvider]
+    [validStakepoolDataProvider, updateStakePoolIdentifier, resetStakePoolIndentifier]
   )
 
   const handleOnInput = (event: any): void => {
diff --git a/app/frontend/helpers/connect.ts b/app/frontend/helpers/connect.ts
index 8af43158d1..b4442cd751 100644
--- a/app/frontend/helpers/connect.ts
+++ b/app/frontend/helpers/connect.ts
@@ -5,6 +5,7 @@ import {mapActions} from '../libs/unistore/util'
 // eslint-disable-next-line
 import {State} from '../state'
 import {ComponentClass, FunctionComponent} from 'preact'
+import {useMemo} from 'preact/hooks'
 
 // Note(ppershing): Enjoy generic insanity!
 
@@ -51,6 +52,9 @@ type UseSelector = <T>(selector: (state: State) => T) => T
 const useSelector: UseSelector = _useSelector
 
 type UseActions = <T>(actions: (store: any) => T) => BindActions<T>
-const useActions: UseActions = (actions) => mapActions(actions, useStore())
+const useActions: UseActions = (actions) => {
+  const store = useStore()
+  return useMemo(() => mapActions(actions, store), [actions, store])
+}
 
 export {connect, useStore, useSelector, useActions}