Chapter 49: cancelRender()

Core Idea

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

Key Concepts

• Example
• cancelRender() throws an error
• Compatibility
• See also

Code Examples

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;
};

• What it demonstrates: Usage pattern for cancelRender() from the official docs.

Key Takeaways

1. Understand example when working with cancelRender().
2. Understand cancelrender() throws an error when working with cancelRender().
3. Understand compatibility when working with cancelRender().
4. Understand see also when working with cancelRender().

Connects To

• Continue Render: related page in the Hooks & Data APIs section.
• Data Fetching: related page in the Hooks & Data APIs section.
• Default Props Inference: related page in the Hooks & Data APIs section.