Merge pull request #145

* Fix RefreshSnapshot component and make useRefreshSnapshot not a hook,…

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 <></>
 }

packages/r3f/src/components/useRefreshSnapshot.ts

@@ -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()
-  }, [])
-}

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'

packages/r3f/src/utils.ts

@@ -0,0 +1,3 @@
+import {useEditorStore} from './store'
+
+export const refreshSnapshot = useEditorStore.getState().createSnapshot