React Suspense not working with useEffect/setTimeOut

June 25, 2022

I have suspense like this in the App file

<Suspense fallback={<DelayedFallback />}>

Then I have an useEffect/setTimeOut:

const DelayedFallback = () => {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    setTimeout(() => setLoaded(true), 5000);
  }, []);

  return <> {!loaded && <Loading />} </>;
};

export default DelayedFallback;

The purpose is the client wants people who visit the website to watch their video.

Suspense is not respecting this.

Any help would be appreciated!

>Solution :

If what you need is to delay the rendering of a component for an arbitrary amount of time you could simply do something like:

const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  setTimeout(() => {
    setIsLoaded(true);
  }, 5000);
});

if (!isLoaded) return <Loading />;

return <MyComponent />;

If you are using <video> you could use the ended event instead of a setTimeout.

At the moment, Suspense is only meant for lazy loading React components.