useSetTask

The useSetTask hook returns registers task in the Manager provided by a Provider component, optionally associating it with a category and/or a custom configuration.

useSetTask(
  taskId: string,
  task: Task,
  taskDeps?: DependencyList,
  categoryId?: string,
  config?: TaskRunConfig,
  configDeps?: DependencyList,
): void

Note that this hook will unregister the task when the component is unmounted, so it is most suitable for setting up a task that is only needed within one part of an application.

The task is an asynchronous function that is passed an optional string when it is scheduled. Like the setTask method, the hook simply registers it with an Id so a run can be scheduled in the future.

The configuration has properties which let you indicate the duration of task runs and their retry behaviors, for example.

If the hook is called on a task Id that already exists, its function, category, and configuration will be updated. When the component unmounts, the task will be removed, so it is best to use a unique Id for the task that will not conflict with tasks registered elsewhere in the application.

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

const Pane = () => {
  useSetTask('ping', async () => await fetch('https://example.org'));
};

const App = ({manager}) => (
  <Provider manager={manager}>
    <Pane />
  </Provider>
);

const app = document.createElement('div');
const manager = createManager();
const root = createRoot(app);
root.render(<App manager={manager} />);

console.log(manager.getTaskIds());
// -> ['ping']

root.unmount();
console.log(manager.getTaskIds());
// -> []