`useCreateCheckpoints`

The useCreateCheckpoints hook is used to create a Checkpoints object within a React application with convenient memoization.

useCreateCheckpoints(
  store: Store,
  create: (store: Store) => Checkpoints,
  createDeps?: DependencyList,
): Checkpoints

	Type	Description
`store`	`Store`	A reference to the `Store` for which to create a new `Checkpoints` object.
`create`	`(store: Store) => Checkpoints`	A function for performing the creation steps of the `Checkpoints` object for the `Store`, plus any additional steps such as adding definitions or listeners, and returning it.
`createDeps?`	`DependencyList`	An optional array of dependencies for the `create` function, which, if any change, result in its rerun. This parameter defaults to an empty array.
returns	`Checkpoints`	A reference to the Checkpoints object.

It is possible to create a Checkpoints object outside of the React app with the regular createCheckpoints function and pass it in, but you may prefer to create it within the app, perhaps inside the top-level component. To defend against a new Checkpoints object being created every time the app renders or re-renders, the useCreateCheckpoints hook wraps the creation in a memoization.

The useCreateCheckpoints hook is a very thin wrapper around the React useMemo hook, defaulting to the provided Store as its dependency, so that by default, the creation only occurs once per Store.

If your create function contains other dependencies, the changing of which should also cause the Checkpoints object to be recreated, you can provide them in an array in the optional second parameter, just as you would for any React hook with dependencies.

This hook ensures the Checkpoints object is destroyed whenever a new one is created or the component is unmounted.

Examples

This example creates a Checkpoints object at the top level of a React application. Even though the App component is rendered twice, the Checkpoints object creation only occurs once by default.

const App = () => {
  const store = useCreateStore(createStore);
  const checkpoints = useCreateCheckpoints(store, (store) => {
    console.log('Checkpoints created');
    return createCheckpoints(store).setSize(10);
  });
  return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
};

const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App />);
// -> 'Checkpoints created'

root.render(<App />);
// No second Checkpoints creation

console.log(app.innerHTML);
// -> '<span>[[],"0",[]]</span>'

This example creates a Checkpoints object at the top level of a React application. The App component is rendered twice, each with a different top-level prop. The useCreateCheckpoints hook takes the size prop as a dependency, and so the Checkpoints object is created again on the second render.

const App = ({size}) => {
  const store = useCreateStore(createStore);
  const checkpoints = useCreateCheckpoints(
    store,
    (store) => {
      console.log(`Checkpoints created, size ${size}`);
      return createCheckpoints(store).setSize(size);
    },
    [size],
  );
  return <span>{JSON.stringify(checkpoints.getCheckpointIds())}</span>;
};

const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App size={20} />);
// -> 'Checkpoints created, size 20'

console.log(app.innerHTML);
// -> '<span>[[],"0",[]]</span>'

root.render(<App size={50} />);
// -> 'Checkpoints created, size 50'

console.log(app.innerHTML);
// -> '<span>[[],"0",[]]</span>'