Hooks and Flatlist Bug in Update State

🐛 Bug Report

To Reproduce

Expected Behavior

I am using Hooks in React-Native. I got a problem with my state update, when using FlatList. If I call a function of the parent inside a rendered item of my flatlist to change a state, the state isn’t updated. Although useEffect says that its updated, after the next function call, my state is resetted.

Code Example

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import React, { useEffect, useState } from 'react';

import NavigationHandler from '../../hoc/navigationHandler/NavigationHandler';
import OCRImageView from '../../components/main/ocrImageView/OCRImageView';

const data = [1, 2, 3, 4];
const MainScreen = () => {
  const [array, setArray] = useState([]);
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    console.log('array: ', array);
  }, [array]);
  const onPressAdd = () => {
    setArray([...array, counter]);
    setCounter(counter + 1);
  };
  const onPressRemove = () => {};
  const _keyExtractor = (item, index) => index.toString();
  const _renderItem = ({ item }) => {
    return (
      <ChildComponent onPressAdd={onPressAdd} onPressRemove={onPressRemove} />
    );
  };
  return (
    <View>
      <FlatList
        keyExtractor={_keyExtractor}
        data={data}
        renderItem={_renderItem}
      />
    </View>
  );
};

export default MainScreen;

type Props = {
  onPressAdd: () => void,
  onPressRemove: () => void
};
const ChildComponent = ({ onPressAdd, onPressRemove }: Props) => {
  return (
    <View>
      <TouchableOpacity onPress={onPressAdd}>
        <Text>add</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={onPressRemove}>
        <Text>remove</Text>
      </TouchableOpacity>
    </View>
  );
};

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: (4) x64 Intel® Core™ i5-2400S CPU @ 2.50GHz Memory: 106.48 MB / 14.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 11.9.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.5.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2 Android SDK: API Levels: 23, 25, 26, 27, 28 Build Tools: 23.0.1, 26.0.1, 26.0.3, 27.0.3, 28.0.3 System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 9.2/9C40b - /usr/bin/xcodebuild npmPackages: react: 16.8.3 => 16.8.6 react-native: 0.59.1 => 0.59.1 npmGlobalPackages: react-native-cli: 2.0.1

[AntoineDoubovetzky]

@karvulf The FlatList doesn’t rerender because the data passed to the FlatList are the same. You have to add the extraData prop to the FlatList (https://facebook.github.io/react-native/docs/flatlist#extradata)

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.