Example of a React component using useLiveQuery()

OldFriendsComponent.jsx

function FriendsComponent({minAge = 75}) {
  const friends = useLiveQuery(
    () => db.friends
      .where('age').aboveOrEqual(minAge)
      .toArray()
  );
    
  return friends && <ul>{
    friends.map(friend =>       
      <li key={friend.id}>
        {friend.name}, {friend.age}
      </li>
    )
  }</ul>;
}

Are you using [email protected]? (npm install dexie@next)

Yes I am using the same version.

I just read your previous comment more carefully - Dexie's new observability will only observe changes performed programatically. It's not possible to get noticed about manual changes using the application tab in devtools. There is simply no native support for that in the DOM apis. However, changes made on workers or other tabs do propagate cross tabs/workers as long as they were changed using [email protected] or later.

Thanks .. understood.. we are trying to make a POC where we are using indexedDB (Dexie) as a wrapper and checking if it is feasible to use it. Our application is very data heavy and it keeps increasing .. do we know the limit we can save in indexed db and if we can increase it how...

Limits of indexedDB storage depends on platform and whether you get persist permission for you app. If you are building a PWA where your users "install" the webapp (user adds the web app to their start screen), you will get more limit than if you are just using it on a web page. See also StorageManager. That page doesn't yet cover how Chromium (Chrome, Opera, Edge) / WebKit (Safari) and SpiderMonkey (Firefox) are handling the limits differently.

Regarding useLiveQuery(), queries will remain efficient on large datasets as long as they are using indices to query subsets of the data. Observing an entire large table without filtering on index will of course be too heavy for the app, but adding a .limit(X) on the query will keep the queries light