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​