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.