useResultRowIdsListener
The useResultRowIdsListener
hook registers a listener function with a Queries
object that will be called whenever the Row
Ids
in a result Table
change.
useResultRowIdsListener(
queryId: IdOrNull,
listener: ResultRowIdsListener,
listenerDeps?: DependencyList,
queriesOrQueriesId?: QueriesOrQueriesId,
): void
Type | Description | |
---|---|---|
queryId | IdOrNull | The |
listener | ResultRowIdsListener | The function that will be called whenever the |
listenerDeps? | DependencyList | An optional array of dependencies for the |
queriesOrQueriesId? | QueriesOrQueriesId | The |
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 useResultRowIds
hook).
You can either listen to a single result Table
(by specifying a query Id
as the method's first parameter) or changes to any result Table
(by providing a null
wildcard).
Unlike the addResultRowIdsListener
method, which returns a listener Id
and requires you to remove it manually, the useResultRowIdsListener
hook manages this lifecycle for you: when the listener changes (per its listenerDeps
dependencies) or the component unmounts, the listener on the underlying Queries
object will be deleted.
This example uses the useResultRowIdsListener
hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Queries
object.
const App = ({queries}) => (
<Provider queries={queries}>
<Pane />
</Provider>
);
const Pane = () => {
useResultRowIdsListener('petColors', () =>
console.log('Result Row Ids changed'),
);
return <span>App</span>;
};
const store = createStore().setTable('pets', {
fido: {species: 'dog', color: 'brown'},
felix: {species: 'cat', color: 'black'},
cujo: {species: 'dog', color: 'black'},
});
const queries = createQueries(store).setQueryDefinition(
'petColors',
'pets',
({select}) => select('color'),
);
const app = document.createElement('div');
ReactDOM.render(<App queries={queries} />, app);
console.log(queries.getListenerStats().rowIds);
// -> 1
store.setRow('pets', 'rex', {species: 'dog', color: 'tan'});
// -> 'Result Row Ids changed'
ReactDOM.unmountComponentAtNode(app);
console.log(queries.getListenerStats().rowIds);
// -> 0
v2.0.0