packages/example/src/routes/tests.tsx

@@ -26,7 +26,7 @@ function RouteComponent() {
     const aRef = R.useRef("a value")
     const anotherRef = R.useRef(69)
 
-    const res = R.useRefsState({ aRef, anotherRef })
+    const res = R.useSubscribeRefs(aRef, anotherRef)
 
 
     const [reactValue, setReactValue] = useState("initial")
@@ -46,9 +46,9 @@ function RouteComponent() {
 
     return (
         <Flex direction="row" justify="center" align="center" gap="2">
-            <R.RefState ref={aRef}>
+            <R.SubscribeRefs refs={[aRef, anotherRef]}>
-                {([aValue]) => <Text>{aValue}</Text>}
+                {(aValue, anotherRef) => <Text>{aValue} / {anotherRef}</Text>}
-            </R.RefState>
+            </R.SubscribeRefs>
 
             <Button onClick={() => logValue("test")}>Log value</Button>
             <Button onClick={() => generateUuid()}>Generate UUID</Button>

packages/reffuse/src/ReffuseHelpers.ts

@@ -19,6 +19,7 @@ export abstract class ReffuseHelpers<R> {
     declare ["constructor"]: ReffuseHelpersClass<R>
 
     constructor() {
+        this.SubscribeRefs = this.SubscribeRefs.bind(this as any) as any
         this.RefState = this.RefState.bind(this as any) as any
     }
 
@@ -448,6 +449,19 @@ export abstract class ReffuseHelpers<R> {
     }
 
 
+    SubscribeRefs<
+        const Refs extends readonly SubscriptionRef.SubscriptionRef<any>[],
+        R,
+    >(
+        this: ReffuseHelpers<R>,
+        props: {
+            readonly refs: Refs
+            readonly children: (...args: [...{ [K in keyof Refs]: Effect.Effect.Success<Refs[K]> }]) => React.ReactNode
+        },
+    ): React.ReactNode {
+        return props.children(...this.useSubscribeRefs(...props.refs))
+    }
+
     RefState<A, R>(
         this: ReffuseHelpers<R>,
         props: {