React: [Fiber] Infinite loop caused by a rendering error

[rthor]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When a component returns something other than a valid React element, or null, it throws and does so infinitely. This is render-blocking and freezes the window.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
This happened to me when creating a Provider-type component that rendered its children directly. More specifically, when they were undefined. Eg

class Provider extends React.Component {
  render() {
    return this.props.children // should throw once.
  }
}

// Elsewhere
<div>
  <Provider>this works correctly</Provider>

  // This freaks out
  <Provider />
</div>

Is there a [CodePen, Fiddle, etc] of @next somewhere, that I can use to demonstrate this?

What is the expected behavior?
It should throw, but only once and not freeze the browser.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.0.0-alpha.4
Yes, see http://codepen.io/rthor/pen/bqYBap?editors=0010#0

---

PS I know it's an alpha version 😄

[gaearon]

cc @acdlite, this might be the ErrorUtils bug I mentioned.

@rthor Can you verify whether you get here and what event.error is equal to?

[gaearon]

Random hypothesis: maybe this happens if an error is rethrown in a later tick (like React Redux does).

[rthor]

@gaearon It does reach that point, with depth = 1 and event.error = null.

[jaredpalmer]

I am experiencing this too. Happens whenever anything is undefined.

[acdlite]

I believe I've identified the issue and have a fix.

@jaredpalmer Would you mind posting a jsfiddle with the exact code that triggers the bug for you, so I can be sure the fix I have solves it? It's ok if the fiddle isn't running Fiber; I will paste it into my environment.

[rthor]

@acdlite It happens whenever anything throws.

[eugene1g]

@acdlite This is the only problem with Fiber in our app so far (but... a major one...)

Here is a simple test case to crash the browser. With Chrome, you probably should open the "Task Manager" so you can kill the tab after testing it here https://codesandbox.io/s/Q1ygERY2Y :D

[acdlite]

@eugene1g Thanks for the test case. We're aware of the issue and will fix before 16 stable goes out :)

[acdlite]

Will be fixed by https://github.com/facebook/react/pull/10213