useCheckpointListener
The useCheckpointListener
hook registers a listener function with the Checkpoints
object that will be called whenever the label of a checkpoint changes.
useCheckpointListener(
checkpointId: IdOrNull,
listener: CheckpointListener,
listenerDeps?: DependencyList,
checkpointsOrCheckpointsId?: CheckpointsOrCheckpointsId,
): void
Type | Description | |
---|---|---|
checkpointId | IdOrNull | The |
listener | CheckpointListener | The function that will be called whenever the checkpoint label changes. |
listenerDeps? | DependencyList | An optional array of dependencies for the |
checkpointsOrCheckpointsId? | CheckpointsOrCheckpointsId | 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 useCheckpoint
hook).
You can either listen to a single checkpoint label (by specifying the checkpoint Id
as the method's first parameter), or changes to any checkpoint label (by providing a null
wildcard).
Unlike the addCheckpointListener
method, which returns a listener Id
and requires you to remove it manually, the useCheckpointListener
hook manages this lifecycle for you: when the listener changes (per its listenerDeps
dependencies) or the component unmounts, the listener on the underlying Checkpoints
object will be deleted.
This example uses the useCheckpointListener
hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store
.
const App = ({checkpoints}) => (
<Provider checkpoints={checkpoints}>
<Pane />
</Provider>
);
const Pane = () => {
useCheckpointListener('0', () =>
console.log('Checkpoint label changed'),
);
return <span>App</span>;
};
const store = createStore().setTables({pets: {fido: {sold: false}}});
const checkpoints = createCheckpoints(store);
const app = document.createElement('div');
ReactDOM.render(<App checkpoints={checkpoints} />, app);
console.log(checkpoints.getListenerStats().checkpoint);
// -> 1
checkpoints.setCheckpoint('0', 'initial');
// -> 'Checkpoint label changed'
ReactDOM.unmountComponentAtNode(app);
console.log(checkpoints.getListenerStats().checkpoint);
// -> 0