Skip to main content

useBufferState()

available from 4.0.111

You can use this hook inside your composition to retrieve functions that can inform the Player that your component is currently loading data.

MyComp.tsx
tsx
import React from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
 
  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();
 
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};
MyComp.tsx
tsx
import React from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
 
  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();
 
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};

API​

Returns an object with one method:

delayPlayback()​

Tells the Player to delay playback until you call unblock().

Usage notes​

Handle unmounting​

The user might seek to a different portion of the video which is immediately available.
Use the cleanup function of useEffect() to clear the handle when your component is unmounted.

❌ Causes problems with React strict mode
tsx
import React, { useState } from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥
 
  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
  }, []);
 
  return <></>;
};
❌ Causes problems with React strict mode
tsx
import React, { useState } from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥
 
  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
  }, []);
 
  return <></>;
};

Avoid calling inside useState()​

While the following implementation works in production, it fails in development if you are inside React Strict mode, because the useState() hook is called twice, which causes the first invocation of the buffer to never be cleared and the video to buffer forever.

❌ Doesn't clear the buffer handle when seeking to a different portion of a video
tsx
import React, { useState } from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥
 
  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};
❌ Doesn't clear the buffer handle when seeking to a different portion of a video
tsx
import React, { useState } from "react";
import { useBufferState } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥
 
  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};

Together with delayRender()​

delayRender() is a different API that comes into play during rendering.

If you are loading data, you might want to both delay the screenshotting of your component during rendering and start a buffering state during Preview, in which case you need to use both APIs together.

Using delayRender() and delayPlayback() together
tsx
import React from "react";
import { useBufferState, delayRender, continueRender } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [handle] = React.useState(() => delayRender());
 
  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();
 
    setTimeout(() => {
      delayHandle.unblock();
      continueRender(handle);
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};
Using delayRender() and delayPlayback() together
tsx
import React from "react";
import { useBufferState, delayRender, continueRender } from "remotion";
 
const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [handle] = React.useState(() => delayRender());
 
  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();
 
    setTimeout(() => {
      delayHandle.unblock();
      continueRender(handle);
    }, 5000);
 
    return () => {
      delayHandle.unblock();
    };
  }, []);
 
  return <></>;
};

See also​