TinyTick logoTinyTick

useCreateManager

The useCreateManager hook is used to create a Manager within a React application with convenient memoization.

useCreateManager(
  create: () => Manager,
  createDeps?: DependencyList,
): Manager
TypeDescription
create() => Manager

A function for performing the creation of the Manager, plus any additional steps such as starting it, 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.

returnsManager

A reference to the Manager.

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

The useCreateManager hook is a very thin wrapper around the React useMemo hook, defaulting to an empty array for its dependencies, so that by default, the creation only occurs once.

If your create function contains other dependencies, the changing of which should cause the Manager 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.

Examples

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

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createManager} from 'tinytick';
import {useCreateManager} from 'tinytick/ui-react';

const App = () => {
  const manager = useCreateManager(() => {
    console.log('Manager created');
    return createManager().start();
  });
  return <span>{manager.getStatus()}</span>;
};

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

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

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

This example creates an empty Manager at the top level of a React application. The App component is rendered twice, each with a different top-level prop. The useCreateManager hook takes the managerStarted prop as a dependency, and so the Manager is created again on the second render.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createManager} from 'tinytick';
import {useCreateManager} from 'tinytick/ui-react';

const App = ({managerStarted}) => {
  const manager = useCreateManager(() => {
    console.log(`New Manager, ${managerStarted ? 'started' : 'stopped'}`);
    return createManager()[managerStarted ? 'start' : 'stop']();
  }, [managerStarted]);
  return <span>{manager.getStatus()}</span>;
};

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App managerStarted={true} />);
// -> 'New Manager, started'

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

root.render(<App managerStarted={false} />);
// -> 'New Manager, stopped'

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

Since

v1.1.0