Using Context breaks components with setState in React Native 0.54

[satya164]

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: react/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: react/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]

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]

Repro'd on a new project:

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]

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

[hramos]

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]

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]

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