Skip to main content

cancelRender()v3.3.44

By invoking this function, Remotion will stop the current render, and not perform any retries.

Pass a string or an Error (for best stack traces) to cancelRender() so you can identify the error when your render failed.
If a string is passed, it will be turned into an Error object.

It throws the error, so any code after it will not be executed.
You might have to catch it to avoid unhandled errors.

cancelRender() can be imported from the remotion package, but preferrably, you should use the useDelayRender() (from v3.0.374) hook instead, because it future-proofs your code for browser rendering.

Example​

MyComposition.tsx
tsx
import React, {useEffect, useState} from 'react';
import {useDelayRender} from 'remotion';
 
export const MyComp: React.FC = () => {
  const {delayRender, continueRender, cancelRender} = useDelayRender();
  const [handle] = useState(() => delayRender('Fetching data...'));
 
  useEffect(() => {
    fetch('https://example.com')
      .then(() => {
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
      });
  }, []);
 
  return null;
};
⚠️ Discouraged - global APIs
tsx
import {useEffect, useState} from 'react';
import {delayRender, continueRender, cancelRender} from 'remotion';
 
const MyComp: React.FC = () => {
  const [handle] = useState(() => delayRender('Fetching data...'));
 
  useEffect(() => {
    fetch('https://example.com')
      .then(() => {
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
      });
  }, []);
 
  return <div>My component</div>;
};

cancelRender() throws an error​

cancelRender() also throws an error, so any code after it will not be executed.
In browser rendering, this might lead to an unhandled error that will create noise in your console or error overlay.

Wrap cancelRender() in a try/catch block to avoid this:

✅ Best practice - wrap cancelRender() in a try/catch block
tsx
import {useDelayRender} from 'remotion';
 
const {cancelRender} = useDelayRender();
 
try {
  cancelRender(new Error('This throws an error'));
} catch {
  // Ignore the resulting error
}

See also​