useDelayRender()
Same as delayRender()
, but as a hook.
Snippet
use-delay-render.tstsx
import {useCallback ,useState } from "react";import {continueRender ,delayRender } from "remotion";typeContinueRenderFnBound = () => void;export constuseDelayRender = (label ?: string):ContinueRenderFnBound => {const [handle ] =useState (() =>delayRender (label ));returnuseCallback (() => {continueRender (handle );}, [handle ]);};
use-delay-render.tstsx
import {useCallback ,useState } from "react";import {continueRender ,delayRender } from "remotion";typeContinueRenderFnBound = () => void;export constuseDelayRender = (label ?: string):ContinueRenderFnBound => {const [handle ] =useState (() =>delayRender (label ));returnuseCallback (() => {continueRender (handle );}, [handle ]);};
Example
MyComp.tsxtsx
import {useCallback ,useEffect ,useState } from "react";export constMyVideo = () => {const [data ,setData ] =useState (null);constcontinueRender =useDelayRender ();constfetchData =useCallback (async () => {constresponse = awaitfetch ("http://example.com/api");constjson = awaitresponse .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.tsxtsx
import {useCallback ,useEffect ,useState } from "react";export constMyVideo = () => {const [data ,setData ] =useState (null);constcontinueRender =useDelayRender ();constfetchData =useCallback (async () => {constresponse = awaitfetch ("http://example.com/api");constjson = awaitresponse .json ();setData (json );continueRender ();}, [continueRender ]);useEffect (() => {fetchData ();}, []);return (<div >{data ? (<div >This video has data from an API! {JSON .stringify (data )}</div >) : null}</div >);};