Adding deps list to useModel

packages/event-reduce-react/src/hooks.ts

@@ -6,14 +6,17 @@ import { dispose } from "event-reduce/lib/utils";
 import { DependencyList, useMemo, useRef } from "react";
 import { useDispose, useOnce } from "./utils";
 
-/** Creates a model that persists across renders of the component and cleans up when the component is unmounted. */
-export function useModel<T extends object>(createModel: () => T) {
+/**
+ * Creates a model that persists across renders of the component and cleans up when the component is unmounted.
+ * @param unobservableDependencies - A list of dependencies that are not observable. The model will be re-created when any of these change.
+*/
+export function useModel<T extends object>(createModel: () => T, unobservableDependencies?: DependencyList) {
     let modelOwner = useOnce(() => ({})); // Effectively makes the component the owner of the model for cleanup purposes
-    let model = useOnce(() => {
+    let model = useMemo(() => {
         let model = createModel();
         changeOwnedValue(modelOwner, undefined, model);
         return model;
-    });
+    }, unobservableDependencies ?? []);
     useDispose(() => disposeModel(modelOwner));
     return model;
 }

packages/event-reduce-react/src/utils.ts

@@ -1,12 +1,10 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 
 export function useDispose(dispose: () => void) {
     useEffect(() => () => dispose(), []);
 }
 
 export function useOnce<T>(getValue: () => T) {
-    let ref = useRef<T>(undefined!);
-    if (ref.current === undefined)
-        ref.current = getValue();
-    return ref.current;
+    let [value] = useState(getValue);
+    return value;
 }