Skip to content

Cannot dismiss warnings due to setState() being called on unmounted component #16336

@robertrossmann

Description

@robertrossmann

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.7.0
  Yarn:  Not Found
  npm:  5.4.2
  Watchman:  Not Found
  Xcode:  Xcode 9.0 Build version 9A235
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: 16.0.0 => 16.0.0
  react-native: 0.50.0-rc.0 => 0.50.0-rc.0

Target Platform: iOS (11.0)

Steps to Reproduce

tl;dr - It's a brand new react-native app with the latest 0.50.0-rc.0 and react 16 releases.

  1. Install the latest version of react-native-cli: npm i -g react-native-cli
  2. Initialise a new project with the RC version of react-native: react-native init reactapp --version 0.50.0-rc.0
  3. Start the iOS simulator with the unmodified app: cd reactapp && node_modules/.bin/react-native run-ios --simulator="iPhone 8"
  4. Somehow cause a warning to pop up (the attached video uses a minimised Chrome with the remote debugger tab to trigger the "Remote debugger is in a background tab" warning, but a console.warn() will do, too)
  5. Click on the warning
  6. Click Dismiss All (nothing happens)
  7. Click Minimize (nothing happens)
  8. Click Minimize again -> Another warning opens up about using setState() on unmounted component

Expected Behavior

  • The Dismiss All button would dismiss all warnings
  • No new warnings are triggered as a result of attempting to dismiss current or all warnings

Actual Behavior

  • The Dismiss All button does not dismiss the current warning
  • After clicking Minimize as a result of failed "Dismiss All" attempts, new warning about using setState() on an unmounted component are triggered and opened in full details on the screen

Reproducible Demo

Git repository

  • git clone https://github.com/robertrossmann/reactapp-bug-report-setstate
  • npm start
  • Click the warning
  • Attempt to dismiss the warning
  • Minimise the warning (nothing happens)
  • Minimise the warning again
  • Observe new warning about setState()

Screenshot with the error:
yellowbox-setstate

Video:
react-native-yellowbox-issue.zip

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions