useRunningTaskRunIds

Example

This example shows how to use the useRunningTaskRunIds hook within a component that's nested inside a Provider. Because the hook is reactive, a change to the running task run Ids will rerender the component

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

const Pane = () => (
  <span>Running task run Ids: {useRunningTaskRunIds().length}</span>
);

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

const manager = createManager().start();
manager.setTask(
  'takes200ms',
  async () => await new Promise((resolve) => setTimeout(resolve, 200)),
);

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

console.log(app.innerHTML);
// -> '<span>Running task run Ids: 0</span>'

manager.scheduleTaskRun('takes200ms');
console.log(app.innerHTML);
// -> '<span>Running task run Ids: 0</span>'

// ... wait 100ms for task run to start

console.log(app.innerHTML);
// -> '<span>Running task run Ids: 1</span>'

// ... wait 200ms for task run to stop
console.log(app.innerHTML);
// -> '<span>Running task run Ids: 0</span>'

Since

v1.2.0