BTW I found the mistake in the snippet, no key was passed to unlisten. Serve me right, I guess, for using a snippet of the internet without examining it properly.😅 Still investigating use-sync-external-store though, I'll post updates for others with similar issues.

I've been at it for an hour or so to understand the api and came up with this:

const dataScriptSubscribe = (listener) => {
   const key = datascript.listen(conn, listener);
   return () => datascript.unlisten(conn, key);
 };
 
 const getQueryData =
   (query, ...args) =>
   () => {
     const queryArgs = [query, datascript.db(conn), ...args];
     return datascript.q(...queryArgs);
   };
 
 export const useQ = (query, ...args) => {
   return useSyncExternalStore(
     dataScriptSubscribe,
     getQueryData(query, ...args)
   );
 };

datascript.q returns a new reference every time it's called

You'll need to memoize it somehow

Thank you! it only took me a second:

const dataScriptSubscribe = (listener) => {
  const key = datascript.listen(conn, listener);
  return () => datascript.unlisten(conn, key);
};

const memoize = moize.deep(R.identity);

const getQueryData =
  (query, ...args) =>
  () => {
    const queryArgs = [query, datascript.db(conn), ...args];
    return memoize(datascript.q(...queryArgs));
  };

export const useQ = (query, ...args) => {
  return useSyncExternalStore(
    dataScriptSubscribe,
    getQueryData(query, ...args)
  );
};

This implementation still seems buggy:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

The former implementation seems to be more stable so I'm returning to it for now

Ok

Do you want any help debugging?

well it seems that I don't fully understand the behavior of useSyncExternalStore . But it's curious that in my use case I have (for now) 2 kinds of queries from the db: 1. Location:

[:find (pull ?location [*]) .
  :where
  [?location "ident" "${locationIdent}"]]

[:find ?search .
  :where
  [?location "ident" "${locationIdent}"]
  [?location "search" ?search]]

An easy test for 2 would be to use search in a standard component that uses location without problem

Alright so I tried and search breaks the app regardless of where it called so (thank god) is not an integration issue

So my last hunch is memoization of strings, that is the only variable I recognize...

What lib are you using to memoize it? Ramda?

moize

moize.deep

what's R.identity?

here's what I would try https://gist.github.com/lilactown/a3f44f713e256f506256816a6e27beaa/revisions

R.identity is x => x Simply returns what it's given...

could it be that the "search" result returns a different ordering of the results each time, which breaks the memoization approach you're using?

I'm just guessing, I'd have to see the rest of the code to be sure, maybe run it

I'm don't think that datascript.q should be memoized, as memoization works only for referentially transparent functions. If I'd memoized it, the same query would get exactly the same result even though the underlying db has changed.

I'll take a deeper look at what search returns each time, also I'll test the memoization function on those results and see if it works as I think

datascript.q is referentially transparent

you pass in the query and the datascript.db(conn) each time. if the value returned by datascript.db changes, or the query changes, it would re-run the q function

Ohhh yeah, you right, because i wrapped it with my own q i forgot you pass datascript.db(conn)

That would be cleaner, I'll try that...

I think I found the problem! 😁 I haven't tested it yet, but the max number of cached results default to 1. So it wasn't search that was the problem but the fact that there were 2 queries...

I'll test it later with your gist and update

WORKS! 🥳 This is the final draft:

const dataScriptSubscribe = (listener) => {
  const key = datascript.listen(conn, listener);
  return () => datascript.unlisten(conn, key);
};

const memoQ = moize(datascript.q, {
  isDeepEqual: true,
  maxSize: Number.POSITIVE_INFINITY,
});

const getQueryData =
  (query, ...args) =>
  () => {
    const queryArgs = [query, datascript.db(conn), ...args];
    return memoQ(...queryArgs);
  };

export const useQ = (query, ...args) => {
  return useSyncExternalStore(
    dataScriptSubscribe,
    getQueryData(query, ...args)
  );
};

@U4YGF4NGM Thank you for your help! 😄

Hooray!

You might consider using an LRU cache instead of an infinite size to avoid memory consumption. Not sure if moize supports that. But I'm glad it's working!!

moize does LRU, I wasn't sure what size to give it :thinking_face:. I'm guessing it should be around o(n) where n is the size of concurrent queries.