forceupdate (#2983)

.changeset/plenty-rice-love.md

@@ -0,0 +1,5 @@
+---
+"mobx-react-lite": patch
+---
+
+Allow force update to be called infinitely times

packages/mobx-react-lite/src/useObserver.ts

@@ -1,14 +1,12 @@
 import { Reaction } from "mobx"
 import React from "react"
-
 import { printDebugValue } from "./utils/printDebugValue"
 import {
     addReactionToTrack,
     IReactionTracking,
     recordReactionAsCommitted
 } from "./utils/reactionCleanupTracking"
 import { isUsingStaticRendering } from "./staticRendering"
-import { useForceUpdate } from "./utils/utils"
 
 function observerComponentNameFor(baseComponentName: string) {
     return `observer${baseComponentName}`
@@ -29,8 +27,9 @@ export function useObserver<T>(fn: () => T, baseComponentName: string = "observe
     }
 
     const [objectRetainedByReact] = React.useState(objectToBeRetainedByReactFactory)
-
-    const forceUpdate = useForceUpdate()
+    // Force update, see #2982
+    const [, setState] = React.useState()
+    const forceUpdate = () => setState([] as any)
 
     // StrictMode/ConcurrentMode/Suspense may mean that our component is
     // rendered and abandoned multiple times, so we need to track leaked

packages/mobx-react-lite/src/utils/utils.ts

@@ -1,17 +1,3 @@
-import { useCallback, useState } from "react"
-
-const EMPTY_ARRAY: any[] = []
-
-export function useForceUpdate() {
-    const [, setTick] = useState(0)
-
-    const update = useCallback(() => {
-        setTick(tick => tick + 1)
-    }, EMPTY_ARRAY)
-
-    return update
-}
-
 const deprecatedMessages: string[] = []
 
 export function useDeprecated(msg: string) {