Skip to main content

cancelRender()

Available from v3.3.44

By invoking cancelRender(), Remotion will stop rendering all the frames, and not do any retries.

Pass a string or an Error (for best stack traces) to cancelRender() so you can identify the error when your render failed.

Example​

MyComposition.tsx
tsx
import React, { useEffect, useState } from "react";
import { cancelRender, continueRender, delayRender } from "remotion";
 
export const MyComp: React.FC = () => {
  const [handle] = useState(() => delayRender("Fetching data..."));
 
  useEffect(() => {
    fetch("https://example.com")
      .then(() => {
        continueRender(handle);
      })
      .catch((err) => cancelRender(err));
  }, []);
 
  return null;
};
MyComposition.tsx
tsx
import React, { useEffect, useState } from "react";
import { cancelRender, continueRender, delayRender } from "remotion";
 
export const MyComp: React.FC = () => {
  const [handle] = useState(() => delayRender("Fetching data..."));
 
  useEffect(() => {
    fetch("https://example.com")
      .then(() => {
        continueRender(handle);
      })
      .catch((err) => cancelRender(err));
  }, []);
 
  return null;
};

See also​