Hooks and Flatlist Bug in Update State

[karvulf]

🐛 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(R) Core(TM) 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)

[soqt]

@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)

But what do you fill into "extraData" if we use a stateless component? There is only a state from useState()

[soqt]

I have the same issue when I use Flatlist with useState([]). Here state data is an array of objects, when I try to update one entry in the array, and setState(newDataArray), UI doesn't re-render. but setData([...newDataArray]) works. Not sure why.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

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.