@openmrs/esm-react-utils 8.0.1-pre.3473 → 8.0.1-pre.3498

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 52 files with swc (148.75ms)
+[0] Successfully compiled: 52 files with swc (124.08ms)
 [0] swc --strip-leading-paths src -d dist exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/useStore.js

@@ -1,5 +1,4 @@
-/** @module @category Store */ import { subscribeTo } from "@openmrs/esm-state";
-import { useEffect, useMemo, useState } from "react";
+/** @module @category Store */ import { useCallback, useMemo, useSyncExternalStore } from "react";
 function bindActions(store, actions) {
     if (typeof actions == 'function') {
         actions = actions(store);
@@ -17,11 +16,18 @@ function bindActions(store, actions) {
 }
 const defaultSelectFunction = ()=>(x)=>x;
 function useStore(store, select = defaultSelectFunction(), actions) {
-    const [state, setState] = useState(()=>select(store.getState()));
-    useEffect(()=>subscribeTo(store, select, setState), [
+    // Use useSyncExternalStore to subscribe synchronously during render
+    // This ensures React can properly track all state updates
+    const subscribe = useCallback((callback)=>{
+        return store.subscribe(callback);
+    }, [
+        store
+    ]);
+    const getSnapshot = useCallback(()=>select(store.getState()), [
         store,
         select
     ]);
+    const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     let boundActions = useMemo(()=>actions ? bindActions(store, actions) : {}, [
         store,
         actions
@@ -44,8 +50,9 @@ function useStore(store, select = defaultSelectFunction(), actions) {
  * custom hook for a specific store.
  */ function createUseStore(store) {
     function useStore(actions) {
-        const [state, set] = useState(store.getState());
-        useEffect(()=>store.subscribe((state)=>set(state)), []);
+        const subscribe = useCallback((callback)=>store.subscribe(callback), []);
+        const getSnapshot = useCallback(()=>store.getState(), []);
+        const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
         let boundActions = useMemo(()=>actions ? bindActions(store, actions) : {}, [
             actions
         ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "8.0.1-pre.3473",
+  "version": "8.0.1-pre.3498",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "type": "module",
@@ -78,17 +78,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3473",
-    "@openmrs/esm-config": "8.0.1-pre.3473",
-    "@openmrs/esm-context": "8.0.1-pre.3473",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3473",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3473",
-    "@openmrs/esm-extensions": "8.0.1-pre.3473",
-    "@openmrs/esm-feature-flags": "8.0.1-pre.3473",
-    "@openmrs/esm-globals": "8.0.1-pre.3473",
-    "@openmrs/esm-navigation": "8.0.1-pre.3473",
-    "@openmrs/esm-state": "8.0.1-pre.3473",
-    "@openmrs/esm-utils": "8.0.1-pre.3473",
+    "@openmrs/esm-api": "8.0.1-pre.3498",
+    "@openmrs/esm-config": "8.0.1-pre.3498",
+    "@openmrs/esm-context": "8.0.1-pre.3498",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3498",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3498",
+    "@openmrs/esm-extensions": "8.0.1-pre.3498",
+    "@openmrs/esm-feature-flags": "8.0.1-pre.3498",
+    "@openmrs/esm-globals": "8.0.1-pre.3498",
+    "@openmrs/esm-navigation": "8.0.1-pre.3498",
+    "@openmrs/esm-state": "8.0.1-pre.3498",
+    "@openmrs/esm-utils": "8.0.1-pre.3498",
     "@swc/cli": "^0.7.7",
     "@swc/core": "^1.11.29",
     "concurrently": "^9.1.2",

package/src/useStore.ts

@@ -1,6 +1,5 @@
 /** @module @category Store */
-import { subscribeTo } from '@openmrs/esm-state';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useSyncExternalStore } from 'react';
 import type { StoreApi } from 'zustand';
 
 export type ActionFunction<T> = (state: T, ...args: any[]) => Partial<T>;
@@ -67,8 +66,18 @@ function useStore<T, U, A extends Actions<T>>(
   select: (state: T) => U = defaultSelectFunction(),
   actions?: A,
 ) {
-  const [state, setState] = useState<U>(() => select(store.getState()));
-  useEffect(() => subscribeTo(store, select, setState), [store, select]);
+  // Use useSyncExternalStore to subscribe synchronously during render
+  // This ensures React can properly track all state updates
+  const subscribe = useCallback(
+    (callback: () => void) => {
+      return store.subscribe(callback);
+    },
+    [store],
+  );
+
+  const getSnapshot = useCallback(() => select(store.getState()), [store, select]);
+
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
   let boundActions: BoundActions<T, Actions<T>> = useMemo(
     () => (actions ? bindActions(store, actions) : {}),
@@ -97,8 +106,10 @@ function createUseStore<T>(store: StoreApi<T>) {
   function useStore<A extends Actions<T>>(actions: A): T & BoundActions<T, A>;
   function useStore<A extends Actions<T>>(actions?: A): T & BoundActions<T, A>;
   function useStore<A extends Actions<T>>(actions?: A) {
-    const [state, set] = useState(store.getState());
-    useEffect(() => store.subscribe((state) => set(state)), []);
+    const subscribe = useCallback((callback: () => void) => store.subscribe(callback), []);
+    const getSnapshot = useCallback(() => store.getState(), []);
+    const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
     let boundActions: BoundActions<T, Actions<T>> = useMemo(
       () => (actions ? bindActions(store, actions) : {}),
       [actions],