useDelayRender()<AvailableFrom v="4.0.342" />

A React hook that provides scoped delayRender(), continueRender() and cancelRender() (from v4.0.374) functions for React components.

This is the recommended approach instead of using the global delayRender(), continueRender() and cancelRender() functions directly.

import {useDelayRender} from 'remotion';

const MyComp: React.FC = () => {
  const {delayRender, continueRender, cancelRender} = useDelayRender();

  return <div>My component</div>;
};

import {useDelayRender, continueRender, delayRender} from 'remotion';

Why use useDelayRender() over global delayRender()?

With this hook, we can scope the delays to a specific render.
This makes it future-proof for browser rendering. It is recommended to use this hook instead of the global delayRender() function.

Compatibility

<CompatibilityTable chrome firefox safari nodejs={''} bun={''} serverlessFunctions="" clientSideRendering serverSideRendering player="No-op" studio="No-op" hideServers />

See also

• delayRender() - The underlying API
• continueRender() - Manual render continuation
• cancelRender() - Cancel render on error
• Data fetching guide