How to prevent extra renders with useLiveQuery?

[TrevorBurnham]

Let's say that I have some initial data that I want to render while entries are added to my DB. To be precise, let's say that I have 4 network requests that each add 25 items to the DB, and I want to start rendering the data from the DB once 50 items are loaded. I can do this:

export const MyComponent() {
  const dbData = useLiveQuery(async () => {
    return await db.myTable.toArray();
  });

  return render(dbData?.length >= 50 ? dbData : fallbackData);
}

The problem is that useLiveQuery will trigger a no-op re-render when dbData has only 25 items.

Is it possible to use useLiveQuery to only trigger when some condition is met, such as the number of results exceeding some minimum value?

[lirbank]

Like this?

export const MyComponent = () => {
  const loaded = useRef(false);

  const dbData = useLiveQuery(async () => {
    const r = await db.myTable.toArray();

    loaded.current = true;

    return r;
  });

  const data = loaded.current ? dbData : fallbackData;

  // Render something with the data...
  return <div>{data}</div>;
};

[lirbank]

You might also want to take a look at the third argument defaultResult of useLiveQuery() here https://dexie.org/docs/dexie-react-hooks/useLiveQuery()#syntax

[dfahlander]

useLiveQuery is composed as:

(querier, deps, def) => useObservable(
  () => liveQuery(querier),
  deps,
  def
)

(useLiveQuery.ts)

As you see, the useObservable() takes a function that creates an observable. It is possible to chain the observable returned from liveQuery() with a filtering functionality and do something like this:

useObservable(
  () => createFilteredObservable(liveQuery(querier), data => data?.length > 25)
)

Rxjs could be used for these kind of requirements and has already a filter operator.

import { liveQuery } from 'dexie';
import { useObservable } from 'dexie-react-hooks';
import { from, filter } from 'rxjs';


export function useFilteredLiveQuery(querier) {
  return useObservable(
    () => from(liveQuery(querier))
      .pipe(
        filter(dbData => dbData?.length >= 50)
      )
  );
}

This would be a way to prevent noop re-renders.

That said, I am also looking in to allow throttling configuration for live queries - but that use case is more about preventing too frequent querying (and rendering) in cases of extremely frequent write transactions.

[browze]

Would I be right in thinking that this is how you would generally envisage people 'composing' live queries - i.e. using the results from one live query passing them to a filter and having the result be a live query hook? Obviously the same result could generally be achieved just by writing a greater number of distinct live queries, with different conditions, but to 'dry' the code - would this be the way to go - or is there some other facility provided for composition that I've overlooked?

[browze]

Just created a new discussion as this is a bit of a hijack here and it's a wider question that might be of general interest.