`useRowIdsListener`

The useRowIdsListener hook registers a listener function with a Store that will be called whenever the Row Ids in a Table change.

useRowIdsListener(
  tableId: IdOrNull,
  listener: RowIdsListener,
  listenerDeps?: DependencyList,
  mutator?: boolean,
  storeOrStoreId?: StoreOrStoreId,
): void

	Type	Description
`tableId`	`IdOrNull`	The `Id` of the `Table` to listen to, or `null` as a wildcard.
`listener`	`RowIdsListener`	The function that will be called whenever the `Row` `Ids` in the `Table` change.
`listenerDeps?`	`DependencyList`	An optional array of dependencies for the `listener` function, which, if any change, result in the re-registration of the listener. This parameter defaults to an empty array.
`mutator?`	`boolean`	An optional boolean that indicates that the listener mutates `Store` data.
`storeOrStoreId?`	`StoreOrStoreId`	The `Store` to register the listener with: omit for the default context `Store`, provide an `Id` for a named context `Store`, or provide an explicit reference.
returns	`void`	This has no return value.

This hook 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 useRowIds hook).

You can either listen to a single Table (by specifying its Id as the method's first parameter) or changes to any Table (by providing null).

Unlike the addRowIdsListener method, which returns a listener Id and requires you to remove it manually, the useRowIdsListener hook manages this lifecycle for you: when the listener changes (per its listenerDeps dependencies) or the component unmounts, the listener on the underlying Store will be deleted.

Example

This example uses the useRowIdsListener hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

import {Provider, useRowIdsListener} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => {
  useRowIdsListener('pets', () => console.log('Row Ids changed'));
  return <span>App</span>;
};

const store = createStore().setTables({pets: {fido: {color: 'brown'}}});
const app = document.createElement('div');
const root = createRoot(app);
root.render(<App store={store} />);
console.log(store.getListenerStats().rowIds);
// -> 1

store.setRow('pets', 'felix', {color: 'black'});
// -> 'Row Ids changed'

root.unmount();
console.log(store.getListenerStats().rowIds);
// -> 0

Since

v1.0.0