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

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.