From c9874d46a16a09159e6e1bd4da4e61ec25bd62d2 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Tue, 24 May 2022 11:27:48 -0300
Subject: [PATCH] feat: useStorage update onFocus (#1316)

* update storage on focus

* add focus
---
 packages/sdk/src/storage/useStorage.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/sdk/src/storage/useStorage.ts b/packages/sdk/src/storage/useStorage.ts
index b4c5a6041a..79b40f6b65 100644
--- a/packages/sdk/src/storage/useStorage.ts
+++ b/packages/sdk/src/storage/useStorage.ts
@@ -6,7 +6,7 @@
  * between server/browser. When state is 'hydrated', the value in the heap
  * is the same as the value in IDB
  */
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { get, set } from 'idb-keyval'
 
 const getItem = async <T>(key: string) => {
@@ -49,10 +49,20 @@ export const useStorage = <T>(key: string, initialValue: T | (() => T)) => {
       }
     }
 
+    const focusHandler = () => {
+      if (document.visibilityState === 'visible') {
+        effect()
+      }
+    }
+
     setTimeout(effect, 0)
+    document.addEventListener('visibilitychange', focusHandler)
+    window.addEventListener('focus', focusHandler)
 
     return () => {
       cancel = true
+      document.removeEventListener('visibilitychange', focusHandler)
+      window.removeEventListener('focus', focusHandler)
     }
   }, [key])