Benefits of reactive updates

When writing an app a common problem is synchronizing the UI with updates from the database.

Every time you send a query to the database, you need to inform the UI that some data changed. Ideally you don't want to refresh the whole page, but only reload the parts that need to be updated.

This is a complex problem. Solutions like React Query are built specifically to solve this, by revalidating the UI when the data changes.

But there is another even simpler solution: reactive queries.

Reactive queries listen to underlying database changes and automatically refresh the data that changed.

With this approach, you only need to care about writing to the database, and not about updates to the UI. After a change is made, the UI is automatically updated for you.

This is achieved by using the live extension of Pglite. It listens to changes in the database and notifies the UI (live queries).

export const useFoods = () => {
  // 👇 Live query that automatically refreshes the UI when the selected data changes
  return useQuery((orm) => orm.select().from(foodTable).toSQL(), FoodSelect);
};

Let's see how this works in practice in the following lessons 🚀