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>;
}

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