TinyBase

useCreateMetrics

The useCreateMetrics hook is used to create a Metrics object within a React application with convenient memoization.

useCreateMetrics(
  store: Store,
  create: (store: Store) => Metrics,
  createDeps?: DependencyList,
): Metrics
TypeDescription
storeStore

A reference to the Store for which to create a new Metrics object.

create(store: Store) => Metrics

A function for performing the creation steps of the Metrics 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.

returnsMetrics

A reference to the Metrics object.

It is possible to create a Metrics object outside of the React app with the regular createMetrics 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 Metrics object being created every time the app renders or re-renders, the useCreateMetrics hook wraps the creation in a memoization.

The useCreateMetrics 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 Metrics 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 Metrics object is destroyed whenever a new one is created or the component is unmounted.

Examples

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

const App = () => {
  const store = useCreateStore(() =>
    createStore().setTable('species', {dog: {price: 5}, cat: {price: 4}}),
  );
  const metrics = useCreateMetrics(store, (store) => {
    console.log('Metrics created');
    return createMetrics(store).setMetricDefinition(
      'speciesCount',
      'species',
    );
  });
  return <span>{metrics.getMetric('speciesCount')}</span>;
};

const app = document.createElement('div');
ReactDOM.render(<App />, app);
// -> 'Metrics created'

ReactDOM.render(<App />, app);
// No second Metrics creation

console.log(app.innerHTML);
// -> '<span>2</span>'

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

const App = ({tableToCount}) => {
  const store = useCreateStore(() =>
    createStore()
      .setTable('pets', {fido: {species: 'dog'}})
      .setTable('species', {dog: {price: 5}, cat: {price: 4}}),
  );
  const metrics = useCreateMetrics(
    store,
    (store) => {
      console.log(`Count created for ${tableToCount} table`);
      return createMetrics(store).setMetricDefinition(
        'tableCount',
        tableToCount,
      );
    },
    [tableToCount],
  );
  return <span>{metrics.getMetric('tableCount')}</span>;
};

const app = document.createElement('div');
ReactDOM.render(<App tableToCount="pets" />, app);
// -> 'Count created for pets table'

console.log(app.innerHTML);
// -> '<span>1</span>'

ReactDOM.render(<App tableToCount="species" />, app);
// -> 'Count created for species table'

console.log(app.innerHTML);
// -> '<span>2</span>'