Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fiber] Infinite loop caused by a rendering error #9193

Closed
rthor opened this issue Mar 16, 2017 · 9 comments
Closed

[Fiber] Infinite loop caused by a rendering error #9193

rthor opened this issue Mar 16, 2017 · 9 comments
Assignees

Comments

@rthor
Copy link
Contributor

rthor commented Mar 16, 2017

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>

screen shot 2017-03-16 at 15 29 54

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
Copy link
Collaborator

gaearon commented Mar 16, 2017

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?

@acdlite acdlite self-assigned this Mar 16, 2017
@gaearon
Copy link
Collaborator

gaearon commented Mar 16, 2017

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

@rthor
Copy link
Contributor Author

rthor commented Mar 16, 2017

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

@jaredpalmer
Copy link
Contributor

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

@acdlite
Copy link
Collaborator

acdlite commented Mar 16, 2017

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
Copy link
Contributor Author

rthor commented Mar 17, 2017

@acdlite It happens whenever anything throws.

@eugene1g
Copy link

eugene1g commented Jun 1, 2017

@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
screen shot 2017-06-01 at 3 13 37 pm

@acdlite
Copy link
Collaborator

acdlite commented Jun 1, 2017

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

@gaearon gaearon changed the title [Fiber alpha.4] Infinite error throws when render returns falsy [Fiber] Infinite loop caused by a rendering error Jul 11, 2017
@acdlite acdlite mentioned this issue Jul 19, 2017
3 tasks
@acdlite
Copy link
Collaborator

acdlite commented Jul 20, 2017

Will be fixed by #10213

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants