Synchronize React State with SubscriptionRef using useSynchronizedState Hook

export function useSynchronizedState<T>(defaultState: T) {
  const [subscriptionRef] = useState(
    Effect.runSync(SubscriptionRef.make<T>(defaultState)),
  );

  const value = useSyncExternalStore(
    (callback) =>
      Stream.runForEach(subscriptionRef.changes, () =>
        Effect.sync(callback),
      ).pipe(Effect.runCallback),
    () => {
      return Effect.runSync(SubscriptionRef.get(subscriptionRef));
    },
  );

  return [value, subscriptionRef] as const;
}

export function useSynchronizedState<T>(defaultState: T) {
  const [subscriptionRef] = useState(
    Effect.runSync(SubscriptionRef.make<T>(defaultState)),
  );

  const value = useSyncExternalStore(
    (callback) =>
      Stream.runForEach(subscriptionRef.changes, () =>
        Effect.sync(callback),
      ).pipe(Effect.runCallback),
    () => {
      return Effect.runSync(SubscriptionRef.get(subscriptionRef));
    },
  );

  return [value, subscriptionRef] as const;
}