Refactor so that in never calls setState, unless needed

packages/@react-facet/core/src/hooks/useFacetUnwrap.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { FacetProp, isFacet, Value, NoValue, EqualityCheck, NO_VALUE } from '../types'
 import { defaultEqualityCheck } from '../equalityChecks'
 
@@ -12,12 +12,15 @@ export function useFacetUnwrap<T extends Value>(
   prop: FacetProp<T>,
   equalityCheck: EqualityCheck<T> = defaultEqualityCheck,
 ): T | NoValue {
+  const previousStateRef = useRef<T | NoValue>(NO_VALUE)
+
   const [state, setState] = useState<{ value: T | NoValue }>(() => {
     if (!isFacet(prop)) return { value: prop }
 
-    return {
-      value: prop.get(),
-    }
+    const value = prop.get()
+    previousStateRef.current = value
+
+    return { value }
   })
 
   useLayoutEffect(() => {
@@ -30,42 +33,42 @@ export function useFacetUnwrap<T extends Value>(
       }
 
       return prop.observe((value) => {
-        setState((previousState) => {
-          const { value: previousValue } = previousState
+        const previousValue = previousStateRef.current
+        previousStateRef.current = value
 
-          /**
-           * Performs this equality check locally to prevent triggering two consecutive renderings
-           * for facets that have immutable values (unfortunately we can't handle mutable values).
-           *
-           * The two renderings might happen for the same state value if the Facet has a value on mount.
-           *
-           * The unwrap will get the value:
-           * - Once on initialization of the useState above
-           * - And another time on this observe initialization
-           */
-          if (equalityCheck === defaultEqualityCheck) {
-            const typeofValue = typeof previousValue
+        /**
+         * Performs this equality check locally to prevent triggering two consecutive renderings
+         * for facets that have immutable values (unfortunately we can't handle mutable values).
+         *
+         * The two renderings might happen for the same state value if the Facet has a value on mount.
+         *
+         * The unwrap will get the value:
+         * - Once on initialization of the useState above
+         * - And another time on this observe initialization
+         */
+        if (equalityCheck === defaultEqualityCheck) {
+          const typeofValue = typeof previousValue
 
-            if (
-              (typeofValue === 'number' ||
-                typeofValue === 'string' ||
-                typeofValue === 'boolean' ||
-                value === undefined ||
-                value === null) &&
-              value === previousValue
-            ) {
-              return previousState
-            }
-
-            return { value }
+          if (
+            (typeofValue === 'number' ||
+              typeofValue === 'string' ||
+              typeofValue === 'boolean' ||
+              value === undefined ||
+              value === null) &&
+            value === previousValue
+          ) {
+            return
           }
 
-          if (previousValue !== NO_VALUE && isEqual(value)) {
-            return previousState
-          }
+          setState({ value })
+          return
+        }
+
+        if (previousValue !== NO_VALUE && isEqual(value)) {
+          return
+        }
 
-          return { value }
-        })
+        setState({ value })
       })
     }
   }, [prop, equalityCheck])