React Suspense not working with useEffect/setTimeOut

Question

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!

`Suspense` is not mean for that, check the docs: https://reactjs.org/docs/react-api.html#suspense — Camilo, Jun 25 '22 at 00:08
Sounds like you should do all that within the component itself rather than using suspense — Richard Hpa, Jun 25 '22 at 00:19

score 1 · Accepted Answer · answered Jun 25 '22 at 00:19

1

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.

answered Jun 25 '22 at 00:19

Camilo

6,504
4
39
60

Thank you for this! This makes total sense. I am working on a 3JS app that has a gif that needs to be run at the beginning.Not sure if the ended event will work as it is a gif. But this solution worked. I will just apply Suspense to individual components as they are indeed lazy. – Sylwia Makuch Jun 25 '22 at 00:38

React Suspense not working with useEffect/setTimeOut

1 Answers1