Skip to main content

Data fetching

One of the coolest things about Remotion is that you can fetch data from an API.

It works almost like you are used to: You can use the fetch API to load data in a useEffect() call and set a state.

Telling Remotion to wait until the data is loaded

There are two functions, delayRender and continueRender, which you can use to tell Remotion to not yet render the frame. If you want to asynchronously render a frame, you should call delayRender() as soon as possible, before the window onload event is fired. The function returns a handle that you need to give Remotion the green light to render later using continueRender().

tsx
import { useCallback, useEffect, useState } from "react";
import { continueRender, delayRender } from "remotion";
 
export const MyVideo = () => {
const [data, setData] = useState(null);
const [handle] = useState(() => delayRender());
 
const fetchData = useCallback(async () => {
const response = await fetch("http://example.com/api");
const json = await response.json();
setData(json);
 
continueRender(handle);
}, [handle]);
 
useEffect(() => {
fetchData();
}, [fetchData]);
 
return (
<div>
{data ? (
<div>This video has data from an API! {JSON.stringify(data)}</div>
) : null}
</div>
);
};
tsx
import { useCallback, useEffect, useState } from "react";
import { continueRender, delayRender } from "remotion";
 
export const MyVideo = () => {
const [data, setData] = useState(null);
const [handle] = useState(() => delayRender());
 
const fetchData = useCallback(async () => {
const response = await fetch("http://example.com/api");
const json = await response.json();
setData(json);
 
continueRender(handle);
}, [handle]);
 
useEffect(() => {
fetchData();
}, [fetchData]);
 
return (
<div>
{data ? (
<div>This video has data from an API! {JSON.stringify(data)}</div>
) : null}
</div>
);
};

Best practices

During rendering, multiple tabs are opened to speed up rendering. In each of these tabs, the tree is re-rendered by changing the value of useCurrentFrame() and then screenshotted.

  • Each tab will execute the data fetching individually, so if you are rendering with a high concurrency, you may run into a rate limit.
  • You can use the localStorage API to persist data after a network request and make a request only if the local storage is empty.
  • The data returned by an API must be the same when called multiple times, otherwise flickering may apply.
  • Consider fetching data before the render, and pass data as input props
  • Make sure to not have frame as a dependency of the useEffect(), otherwise data will be fetched every frame leading to slowdown and potentially running into rate limits.

Time limit

You need to clear all handles created by delayRender() within 30 seconds after the page is opened. You may increase the timeout.

Using delayRender() to calculate video metadata

You can also customize duration, frame rate and dimensions based on asynchronous data fetching:

See also