question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Suspense component should only capture if fallback prop is defined

See original GitHub issue

[Edit by @acdlite: Decided in comments below that we will change the semantics so that a missing fallback prop means the exception should propagate to the next parent (like a rethrow). That way a Suspense component can specify other props like maxDuration without needing to provide a fallback, too.]


Do you want to request a feature or report a bug? Bug What is the current behavior? <React.Suspense> does not warn you if you omit a fallback). While redundant for TS/Flow usage, I misspelled the fallback prop by accident in a playground and was tearing my hair out trying to figure out why things were not working as expected.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Omit a fallback.

What is the expected behavior? React should warn during development if fallback is undefined.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Master

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
kopaxcommented, Jan 13, 2019

Hi, I am having an issue:

  A React component suspended while rendering, but no fallback UI was specified.
import React, { Suspense, lazy } from 'react';
const Deferred = lazy(() => import('./index'));

export default (props) => (
  <Suspense>
    <Deferred {...props} />
  </Suspense>
);

We use this with react-router and we expect to keep our main page by not using the fallback props. Unfortunatly, the flow makes the first route unmounted.

I know this is very common scenario, does anybody have a recommendation to share for doing this?

Thanks in advance,

1reaction
sebmarkbagecommented, Oct 18, 2018

Yea, that’s probably what we should do.

With the displayPriority field it will be important to be able to add priority hints to these things without a fallback.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Suspense for Data Fetching (Experimental) - React
With this approach, we can fetch code and data in parallel. When we navigate between pages, we don't need to wait for a...
Read more >
React Suspense is not working as intended - Stack Overflow
When that happens, suspense will catch it and display the fallback until the promise resolves, and then it resumes rendering its normal children ......
Read more >
React Suspense in Practice | CSS-Tricks
When a component suspends, React will decline to render the pending state update until all suspended dependencies have been satisfied. So what ...
Read more >
Suspense in React 18 - DEV Community ‍ ‍
Suspense is able to detect when your component is "suspended" and renders a fallback for it. The question you may have is, what...
Read more >
React lazy, Suspense and Concurrent React Breakdown with ...
<Suspense />: Suspense is like an error catcher, which allows us to define fallback JSX if part of the content it is wrapping...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found