From c1e515a13f8ae68283c9c7b83e392e40e8445f87 Mon Sep 17 00:00:00 2001
From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com>
Date: Wed, 4 May 2022 17:10:42 +0200
Subject: [PATCH] Merge pull request #145
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix RefreshSnapshot component and make useRefreshSnapshot not a hook,…
---
 packages/r3f/src/components/RefreshSnapshot.tsx   | 11 ++++++-----
 packages/r3f/src/components/useRefreshSnapshot.ts | 11 -----------
 packages/r3f/src/index.tsx                        |  2 +-
 packages/r3f/src/utils.ts                         |  3 +++
 4 files changed, 10 insertions(+), 17 deletions(-)
 delete mode 100644 packages/r3f/src/components/useRefreshSnapshot.ts
 create mode 100644 packages/r3f/src/utils.ts

diff --git a/packages/r3f/src/components/RefreshSnapshot.tsx b/packages/r3f/src/components/RefreshSnapshot.tsx
index 2819313..17ede25 100644
--- a/packages/r3f/src/components/RefreshSnapshot.tsx
+++ b/packages/r3f/src/components/RefreshSnapshot.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react'
-import useRefreshSnapshot from './useRefreshSnapshot'
+import {refreshSnapshot} from '../utils'
 
 /**
  * Putting this element in a suspense tree makes sure the snapshot editor
  * gets refreshed once the tree renders.
  *
- * Alternatively you can use {@link useRefreshSnapshot}
+ * Alternatively you can use {@link refreshSnapshot}
  *
  * @example
  * Usage
@@ -16,10 +16,11 @@ import useRefreshSnapshot from './useRefreshSnapshot'
  * </Suspense>
  * ```
  */
-const RefreshSnapshot: React.FC<{}> = (props) => {
-  const refreshSnapshot = useRefreshSnapshot()
+const RefreshSnapshot: React.FC<{}> = () => {
   useEffect(() => {
-    refreshSnapshot()
+    setTimeout(() => {
+      refreshSnapshot()
+    })
   }, [])
   return <></>
 }
diff --git a/packages/r3f/src/components/useRefreshSnapshot.ts b/packages/r3f/src/components/useRefreshSnapshot.ts
deleted file mode 100644
index d1af360..0000000
--- a/packages/r3f/src/components/useRefreshSnapshot.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {useCallback} from 'react'
-import {useEditorStore} from '../store'
-
-/**
- * Returns a function that can be called to refresh the snapshot in the snapshot editor.
- */
-export default function useRefreshSnapshot() {
-  return useCallback(() => {
-    useEditorStore.getState().createSnapshot()
-  }, [])
-}
diff --git a/packages/r3f/src/index.tsx b/packages/r3f/src/index.tsx
index 661807a..dee332e 100644
--- a/packages/r3f/src/index.tsx
+++ b/packages/r3f/src/index.tsx
@@ -4,5 +4,5 @@ export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
 export type {EditableState, BindFunction} from './store'
 export {default as SheetProvider, useCurrentSheet} from './SheetProvider'
-export {default as useRefreshSnapshot} from './components/useRefreshSnapshot'
+export {refreshSnapshot} from './utils'
 export {default as RefreshSnapshot} from './components/RefreshSnapshot'
diff --git a/packages/r3f/src/utils.ts b/packages/r3f/src/utils.ts
new file mode 100644
index 0000000..619bd2d
--- /dev/null
+++ b/packages/r3f/src/utils.ts
@@ -0,0 +1,3 @@
+import {useEditorStore} from './store'
+
+export const refreshSnapshot = useEditorStore.getState().createSnapshot