From 6e1da4f1abbfb671eb29ba8f4bd2df7ebbaf5582 Mon Sep 17 00:00:00 2001
From: Julien Genestoux <julien.genestoux@gmail.com>
Date: Fri, 24 May 2024 16:07:43 -0400
Subject: [PATCH] feat(unlock-app): using react-query to cache ENS resolution
 (#13889)

* using react-query to cache ENS resolution

* caching forever
---
 unlock-app/src/hooks/useEns.ts | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/unlock-app/src/hooks/useEns.ts b/unlock-app/src/hooks/useEns.ts
index 599b6ae2e53..a0ee497e9c0 100644
--- a/unlock-app/src/hooks/useEns.ts
+++ b/unlock-app/src/hooks/useEns.ts
@@ -1,6 +1,6 @@
 import { ethers } from 'ethers'
-import { useState, useEffect } from 'react'
 import configure from '../config'
+import { useQuery } from '@tanstack/react-query'
 
 const config = configure()
 
@@ -48,17 +48,14 @@ export const getAddressForName = async (_name: string): Promise<string> => {
  * @param {*} address
  */
 export const useEns = (address: string) => {
-  const [name, setName] = useState(address)
-
-  const getNameForAddress = async (_address: string) => {
-    setName(await getNameOrAddressForAddress(_address))
-  }
-
-  useEffect(() => {
-    getNameForAddress(address)
-  }, [address])
-
-  return name
+  const { data: name } = useQuery(
+    ['ens', address],
+    async () => {
+      return getNameOrAddressForAddress(address)
+    },
+    { staleTime: Infinity }
+  )
+  return name || address
 }
 
 export default useEns