Add useStatusSelector so components only re-render when the status they care about changes

[marknesh]

Problem

useStatus() updates on every sync status event. PowerSync sends a new object each time, even if the field you use did not change.

So a component that only needs connected still re-renders when download progress ticks.

Reading useStatus().connected does not fix this. The hook still stores the whole object, so the component still renders.

Proposal

Add a new hook in @powersync/react:

function useStatusSelector<T>(
  select: (status: SyncStatus) => T,
  isEqual?: (a: T, b: T) => boolean,
): T

It listens to the same status events, but only updates React when the selected value changes.

One field:

const connected = useStatusSelector((status) => status.connected);

This re-renders only when connected changes.

A few fields. No second argument. Default compare is shallow, so a new { ... } with the same fields does not re-render:

const { connected, downloading } = useStatusSelector((status) => ({
  connected: status.connected,
  downloading: status.downloading,
}));

Nested values still need a custom isEqual (or select a primitive). Shallow only looks at the top-level fields:

useStatusSelector(
  (status) => ({ progress: status.downloadProgress }),
  (a, b) => a.progress?.downloadedOperations === b.progress?.downloadedOperations,
);

Happy to open a PR for this if the API looks right.

[simolus3]

My first impression is that this is something we shouldn't reinvent. Maybe we should make it easier to use PowerSync with other state management libraries that already have support for projections though.

[marknesh]

That's reasonable, but sometimes you might not want to wire up a store from like zustand or redux, just to keep the connected label component from rerendering on every download progress tick.