useLocalRowIdsListener
The useLocalRowIdsListener
hook registers a listener function with the Relationships
object that will be called whenever the local Row
Ids
in a Relationship
change.
useLocalRowIdsListener(
relationshipId: IdOrNull,
remoteRowId: IdOrNull,
listener: LocalRowIdsListener,
listenerDeps?: DependencyList,
relationshipsOrRelationshipsId?: RelationshipsOrRelationshipsId,
): void
Type | Description | |
---|---|---|
relationshipId | IdOrNull | The |
remoteRowId | IdOrNull | The |
listener | LocalRowIdsListener | The function that will be called whenever the local |
listenerDeps? | DependencyList | An optional array of dependencies for the |
relationshipsOrRelationshipsId? | RelationshipsOrRelationshipsId | 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 useLocalRowsId hook).
You can either listen to a single local Row
(by specifying the Relationship
Id
and local Row
Id
as the method's first two parameters), or changes to any local Row
(by providing a null
wildcards).
Both, either, or neither of the relationshipId
and remoteRowId
parameters can be wildcarded with null
. You can listen to a specific remote Row
in a specific Relationship
, any remote Row
in a specific Relationship
, a specific remote Row
in any Relationship
, or any remote Row
in any Relationship
.
Unlike the addLocalRowsIdListener method, which returns a listener Id
and requires you to remove it manually, the useLocalRowIdsListener
hook manages this lifecycle for you: when the listener changes (per its listenerDeps
dependencies) or the component unmounts, the listener on the underlying Indexes
object will be deleted.
This example uses the useLocalRowIdsListener
hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Relationships
object.
const App = ({relationships}) => (
<Provider relationships={relationships}>
<Pane />
</Provider>
);
const Pane = () => {
useLocalRowIdsListener('petSpecies', 'dog', () =>
console.log('Local Row Ids changed'),
);
return <span>App</span>;
};
const store = createStore()
.setTable('pets', {fido: {species: 'dog'}, cujo: {species: 'dog'}})
.setTable('species', {wolf: {price: 10}, dog: {price: 5}});
const relationships = createRelationships(store);
relationships.setRelationshipDefinition(
'petSpecies',
'pets',
'species',
'species',
);
const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App relationships={relationships} />);
console.log(relationships.getListenerStats().localRowIds);
// -> 1
store.setRow('pets', 'toto', {species: 'dog'});
// -> 'Local Row Ids changed'
root.unmount();
console.log(relationships.getListenerStats().localRowIds);
// -> 0