Data Duplication issue using react-hook-form

[amjadbouhouch]

Current behavior

I have a list of questions and answers (Q/A) where the state is managed by react-hook-form. When there are many questions and the user scrolls, the answers get duplicated in the UI. For example, the answer for the first question appears again in a later question, even though the underlying data is correct.

Here’s a reproduction of the issue: https://snack.expo.dev/@amjedbouhouch/react-hook-form-flash-list-issue?platform=android

ScreenShots

Expected behavior

To Reproduce

https://snack.expo.dev/@amjedbouhouch/react-hook-form-flash-list-issue?platform=android

Platform:

• iOS
• Android

Environment

1.6.4

[amjadbouhouch]

Adding a key in ItemComponent solves the problem, But this is not what I want because I think it has a performance Impact & forces React to unmount and remount.

[krishnan-456]

I have rendered a list of 10 TextInput fields. When I focus on the last TextInput and scroll up, I notice that the focus is also applied to the first rendered TextInput. Does anyone faced this issue?

"@shopify/flash-list": "^1.7.1",
"react-native": "^0.75.5"

[krishnan-456]

I have rendered a list of 10 TextInput fields. When I focus on the last TextInput and scroll up, I notice that the focus is also applied to the first rendered TextInput. Does anyone faced this issue?

"@shopify/flash-list": "^1.7.1", "react-native": "^0.75.5"

import React from 'react'
import { View, TextInput, StyleSheet } from 'react-native'
import { FlashList } from '@shopify/flash-list'

const App = () => {
  const data = Array.from({ length: 40 }, (_, index) => ({
    key: index.toString(),
    question: `Question ${index + 1}`,
  }));

  // Render each TextInput
  const renderItem = ({ item }: { item: { question: string; answer: string } }) => (
    <View style={styles.itemContainer}>
      <TextInput
        style={styles.input}
        placeholder={item.question}
      />
    </View>
  );

  return (
    <View style={styles.container}>
      <FlashList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        estimatedItemSize={50}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  itemContainer: {
    marginBottom: 10,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 8,
  },
});

export default App;

video attached below:
https://github.com/user-attachments/assets/4b838433-5fe4-4c81-8552-154b3fca1640