useCellListener

The useCellListener primitive registers a listener function with a Store that will be called whenever data in a Cell changes.

useCellListener(
  tableId: MaybeAccessor<IdOrNull>,
  rowId: MaybeAccessor<IdOrNull>,
  cellId: MaybeAccessor<IdOrNull>,
  listener: CellListener,
  mutator?: boolean,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): void

This primitive is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useCell primitive).

You can either listen to a single Cell (by specifying the Table Id, Row Id, and Cell Id as the method's first three parameters) or changes to any Cell (by providing null wildcards).

All, some, or none of the tableId, rowId, and cellId parameters can be wildcarded with null. You can listen to a specific Cell in a specific Row in a specific Table, any Cell in any Row in any Table, for example - or every other combination of wildcards.

Unlike the addCellListener method, which returns a listener Id and requires you to remove it manually, the useCellListener primitive manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useCellListener} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setCell('pets', 'fido', 'species', 'dog');
  useCellListener(
    'pets',
    'fido',
    'species',
    (_store, _tableId, _rowId, _cellId, newCell) => console.log(newCell),
    false,
    store,
  );
  store.setCell('pets', 'fido', 'species', 'guide dog');
  // -> 'guide dog'
  dispose();
});