Skip to content
New issue

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

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

Already on GitHub? # to your account

Using Context breaks components with setState in React Native 0.54 #18351

Closed
satya164 opened this issue Mar 13, 2018 · 6 comments
Closed

Using Context breaks components with setState in React Native 0.54 #18351

satya164 opened this issue Mar 13, 2018 · 6 comments
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. JavaScript Resolution: Locked This issue was locked by the bot.

Comments

@satya164
Copy link
Contributor

satya164 commented Mar 13, 2018

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#12218

This breaks components like FlatList which call setState internally where you get a stack overflow due to re-render happening thousands of times. The workaround is to wrap FlatList with a PureComponent 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 to App.js:

import * as React from 'react';
import { Text, FlatList } from 'react-native';

const { Consumer } = React.createContext({});

export default class App extends React.Component {
  render() {
    return (
      <Consumer>
        {() => {
          console.log('re-rendered');

          return (
            <FlatList
              data={Array.from({ length: 100 }).map((_, i) => `Item ${1}`)}
              renderItem={({ item }) => <Text>{item}</Text>}
              keyExtractor={(item, index) => 'key' + index}
            />
          );
        }}
      </Consumer>
    );
  }
}
@hramos
Copy link
Contributor

hramos commented Mar 13, 2018

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.

hramos added a commit to hramos/react-native that referenced this issue Mar 13, 2018
@hramos
Copy link
Contributor

hramos commented Mar 13, 2018

Repro'd on a new project:

simulator screen shot - iphone 6 - 2018-03-13 at 11 35 59

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.3
Yarn: 1.2.0
npm: 5.6.0
Watchman: 4.9.1
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.2 => 0.54.2

@hramos
Copy link
Contributor

hramos commented Mar 14, 2018

The React <-> React Native sync has landed in 4f8328b. Can you take a look and see if this still happens?

@hramos
Copy link
Contributor

hramos commented Mar 14, 2018

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.

@SASoto
Copy link

SASoto commented Jul 8, 2018

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
I am working with a FlatlList wrapped by a ScrollView, wrapped by a Modal.

@hramos
Copy link
Contributor

hramos commented Jul 16, 2018

0.56 is the latest version, and it has this fix.

@facebook facebook locked as resolved and limited conversation to collaborators Mar 14, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 14, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. JavaScript Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants