Chapter 190: Cancelling renders

Core Idea

Both renderMediaOnWeb() and renderStillOnWeb() support cancellation via the AbortSignal API.

Key Concepts

• Using AbortController
• Detecting if a render was cancelled
• See also

Code Examples

const Component: React.FC = () => null;

const composition = {
  component: Component,
  durationInFrames: 100,
  fps: 30,
  width: 100,
  height: 100,
  id: 'my-composition',
};


const abortController = new AbortController();

// Cancel after 10 seconds
setTimeout(() => abortController.abort(), 10000);

const {getBlob} = await renderMediaOnWeb({
  signal: abortController.signal,
  composition,
});

• What it demonstrates: Usage pattern for Cancelling renders from the official docs.

Key Takeaways

1. Understand using abortcontroller when working with Cancelling renders.
2. Understand detecting if a render was cancelled when working with Cancelling renders.
3. Understand see also when working with Cancelling renders.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.