TinyBase logoTinyBase

useCheckpoint

The useCheckpoint hook returns the label for a checkpoint, and registers a listener so that any changes to that result will cause a re-render.

useCheckpoint(
  checkpointId: Id,
  checkpointsOrCheckpointsId?: any,
): string | undefined
TypeDescription
checkpointIdId

The Id of the checkpoint.

checkpointsOrCheckpointsId?any

The Checkpoints object to be accessed: omit for the default context Checkpoints object, provide an Id for a named context Checkpoints object, or provide an explicit reference.

returnsstring | undefined

A string label for the requested checkpoint, an empty string if it was never set, or undefined if the checkpoint does not exist.

A Provider component is used to wrap part of an application in a context, and it can contain a default Checkpoints object or a set of Checkpoints objects named by Id. The useCheckpoint hook lets you indicate which Checkpoints object to get data for: omit the optional final parameter for the default context Checkpoints object, provide an Id for a named context Checkpoints object, or provide a Checkpoints object explicitly by reference.

When first rendered, this hook will create a listener so that changes to the label will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.

Examples

This example creates a Checkpoints object outside the application, which is used in the useCheckpoint hook by reference. A change to the checkpoint label re-renders the component.

const store = createStore().setTable('pets', {fido: {species: 'dog'}});
const checkpoints = createCheckpoints(store);
const App = () => <span>{useCheckpoint('1', checkpoints)}</span>;

const app = document.createElement('div');
ReactDOMClient.createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<span></span>'

store.setCell('pets', 'fido', 'sold', true);
checkpoints.addCheckpoint('sale');
console.log(app.innerHTML);
// -> '<span>sale</span>'

This example creates a Provider context into which a default Checkpoints object is provided. A component within it then uses the useCheckpoint hook.

const App = ({checkpoints}) => (
  <Provider checkpoints={checkpoints}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useCheckpoint('0')}</span>;

const checkpoints = createCheckpoints(
  createStore().setTable('pets', {fido: {species: 'dog'}}),
).setCheckpoint('0', 'initial');

const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App checkpoints={checkpoints} />);
console.log(app.innerHTML);
// -> '<span>initial</span>'

This example creates a Provider context into which a default Checkpoints object is provided. A component within it then uses the useCheckpoint hook.

const App = ({checkpoints}) => (
  <Provider checkpointsById={{petCheckpoints: checkpoints}}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useCheckpoint('0', 'petCheckpoints')}</span>;

const checkpoints = createCheckpoints(
  createStore().setTable('pets', {fido: {species: 'dog'}}),
).setCheckpoint('0', 'initial');

const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App checkpoints={checkpoints} />);
console.log(app.innerHTML);
// -> '<span>initial</span>'