Fix FlatList rows showing the wrong content after reordering

A feed is sorted and a row displays another story’s local state or image. The problem often appears only after insertion, deletion or reordering.

Why this happens

Unstable keys make React associate existing component instances with different records. Index-based keys describe positions, not the identity of the stories occupying them.

Step-by-step solution

1. Use a stable unique story ID in keyExtractor. Check for duplicate IDs in the response before blaming the renderer.

2. Keep data updates immutable and pass extraData when rendering depends on state outside the data array.

3. Review row-local state and image loading so reused components reset correctly when their actual record changes.

Worked example

<FlatList
  data={stories}
  keyExtractor={story => String(story.id)}
  renderItem={({ item }) => <StoryCard story={item} />}
/>

Verify the fix

Insert a story at the beginning, reverse the order and remove a middle item. The title, image and saved state should remain attached to the correct ID.

Prevent a repeat

Treat duplicate IDs as a data error and avoid generating random keys during render. Random keys force unnecessary remounting and can discard local state.

Reference

Official documentation or standards guidance

An original Gistmax troubleshooting guide. Scenarios and sample values are illustrative; configuration depends on your software version and environment. Cover diagram: Gistmax Tutorials.