-
Notifications
You must be signed in to change notification settings - Fork 24.5k
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
Using Context breaks components with setState in React Native 0.54 #18351
Comments
I have a diff out that should sync these changes into React Native. Since this was not caught by our current test suite, it would be a good idea to add a test here to catch any regressions in the future. |
The React <-> React Native sync has landed in 4f8328b. Can you take a look and see if this still happens? |
Here's the regression test in RNTester: #18382 If you agree my test plan in that PR is solid, then that should serve as a confirmation that this issue has been solved. Please re-open if you find that's not the case. |
Has this issue been fixed? I am currently using version 0.55.4 of react native and am encountering a similar issue to the one expressed in callstack/react-native-paper#272 |
0.56 is the latest version, and it has this fix. |
React Native uses React 16.3.0-alpha.1 which has the new context API. However, there's a bug in the context API which makes the consumer re-render its children every time one of its children call
setState
: facebook/react#12218This breaks components like
FlatList
which callsetState
internally where you get a stack overflow due to re-render happening thousands of times. The workaround is to wrapFlatList
with aPureComponent
to short-circuit the updates.It seems to have been fixed here: facebook/react#12254, so we would need to update the React version used by React Native once it's released.
Environment
Environment:
OS: macOS High Sierra 10.13.4
Node: 9.5.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.2 => 0.54.2
Expected Behavior
Should not cause a stack overflow.
Actual Behavior
Causes a stack overflow.
Steps to Reproduce
It's not possible to provide a Snack since it uses an older version of React Native. You can create a new project with
react-native init
and copy the following code toApp.js
:The text was updated successfully, but these errors were encountered: