extraData属性是否影响FlatList性能？最优传参方式咨询

Great question—this is such a common pain point when working with React Native's FlatList, so let's break this down clearly.

Does using extraData make FlatList slower? #

Short answer: It doesn't have to. Let's start with why extraData exists in the first place. By default, FlatList only re-renders when its data prop changes (specifically, when the array reference changes). If your list items depend on state outside of the data array—like a selected item ID, a toggle state that affects item rendering, or a filter value—extraData tells FlatList: "Hey, this state matters too—check if items need updating when it changes."

The performance hit only happens if you use extraData poorly. For example, if you pass a value that changes frequently but has no impact on your list items, FlatList will trigger unnecessary re-renders of visible items. But when used correctly (i.e., only passing state that actually affects list rendering), the overhead is minimal and totally worth it to keep your list UI in sync with state.

Should I pass the full state (extraData={this.state}) or a single state property (extraData={this.state.number})? #

Always go with the smallest possible subset of state that your list depends on—so in your case, extraData={this.state.number} is way better than passing the entire this.state. Here's why:

FlatList checks for changes in extraData by reference. If you pass this.state, any change to any property in your state (even something unrelated to the list, like a modal's visibility or a form input value) will create a new state object reference. This tells FlatList to re-render all visible list items, even if those items don't care about the changed state property. That's wasted cycles that can lead to jank, especially with long lists.

By passing only this.state.number, you limit re-renders to only when number actually changes. And if your list items only depend on number, this ensures FlatList only updates when necessary.

Example of good vs. bad usage: #

// ❌ Not ideal: Passes entire state, triggers re-renders on any state change
<FlatList
  data={this.state.listData}
  extraData={this.state}
  renderItem={({ item }) => <ListItem item={item} count={this.state.number} />}
/>

// ✅ Better: Only passes the state property the list needs
<FlatList
  data={this.state.listData}
  extraData={this.state.number}
  renderItem={({ item }) => <ListItem item={item} count={this.state.number} />}
/>

Bonus optimization: #

If your list depends on multiple state properties, combine them into a memoized object (in class components, you can compute this in shouldComponentUpdate or getDerivedStateFromProps; in function components, use useMemo). This way, the extraData reference only changes when one of the relevant properties updates:

// For function components
const extraData = useMemo(() => ({
  number: state.number,
  selectedId: state.selectedId
}), [state.number, state.selectedId]);

<FlatList
  data={state.listData}
  extraData={extraData}
  renderItem={({ item }) => <ListItem item={item} count={state.number} isSelected={item.id === state.selectedId} />}
/>

Also, make sure your list item components are pure components (use React.PureComponent for class components or React.memo for function components). This ensures individual items only re-render when their props actually change, even if FlatList checks for updates.

Final Takeaways #

• extraData is not a performance villain—it's a necessary tool to keep your list in sync with external state.
• Avoid passing the entire state; stick to only the properties your list items depend on.
• Pair extraData with pure components to minimize unnecessary re-renders.

内容的提问来源于stack exchange，提问作者Iqbal Jan