Skip to main content

useDelayRender()

Same as delayRender(), but as a hook.

Snippet

use-delay-render.ts
tsx
import { useCallback, useState } from "react";
import { continueRender, delayRender } from "remotion";
 
type ContinueRenderFnBound = () => void;
 
export const useDelayRender = (label?: string): ContinueRenderFnBound => {
const [handle] = useState(() => delayRender(label));
 
return useCallback(() => {
continueRender(handle);
}, [handle]);
};
use-delay-render.ts
tsx
import { useCallback, useState } from "react";
import { continueRender, delayRender } from "remotion";
 
type ContinueRenderFnBound = () => void;
 
export const useDelayRender = (label?: string): ContinueRenderFnBound => {
const [handle] = useState(() => delayRender(label));
 
return useCallback(() => {
continueRender(handle);
}, [handle]);
};

Example

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

See also