From ab1ad33455e332f52c739a00a72e8c03a0ba1730 Mon Sep 17 00:00:00 2001 From: supun_yasantha034 Date: Wed, 14 Oct 2026 14:55:07 +0530 Subject: [PATCH] docs: clarify FlatList extraData prop and PureComponent behavior (fixes #5216) --- docs/flatlist.md | 2 +- website/versioned_docs/version-0.77/flatlist.md | 2 +- website/versioned_docs/version-0.78/flatlist.md | 2 +- website/versioned_docs/version-0.79/flatlist.md | 2 +- website/versioned_docs/version-0.80/flatlist.md | 2 +- website/versioned_docs/version-0.81/flatlist.md | 2 +- website/versioned_docs/version-0.82/flatlist.md | 2 +- website/versioned_docs/version-0.83/flatlist.md | 2 +- website/versioned_docs/version-0.84/flatlist.md | 2 +- website/versioned_docs/version-0.85/flatlist.md | 2 +- website/versioned_docs/version-0.86/flatlist.md | 2 +- website/versioned_docs/version-0.87/flatlist.md | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/flatlist.md b/docs/flatlist.md index d37ed6dc0b6..bc5026f860a 100644 --- a/docs/flatlist.md +++ b/docs/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.77/flatlist.md b/website/versioned_docs/version-0.77/flatlist.md index 6c299ca26bb..3a352bd4a7d 100644 --- a/website/versioned_docs/version-0.77/flatlist.md +++ b/website/versioned_docs/version-0.77/flatlist.md @@ -151,7 +151,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.78/flatlist.md b/website/versioned_docs/version-0.78/flatlist.md index 6c299ca26bb..3a352bd4a7d 100644 --- a/website/versioned_docs/version-0.78/flatlist.md +++ b/website/versioned_docs/version-0.78/flatlist.md @@ -151,7 +151,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.79/flatlist.md b/website/versioned_docs/version-0.79/flatlist.md index 6c299ca26bb..3a352bd4a7d 100644 --- a/website/versioned_docs/version-0.79/flatlist.md +++ b/website/versioned_docs/version-0.79/flatlist.md @@ -151,7 +151,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.80/flatlist.md b/website/versioned_docs/version-0.80/flatlist.md index ce21d77b67a..83c0e4f36c6 100644 --- a/website/versioned_docs/version-0.80/flatlist.md +++ b/website/versioned_docs/version-0.80/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.81/flatlist.md b/website/versioned_docs/version-0.81/flatlist.md index 17e73868f6b..ea61efb29cb 100644 --- a/website/versioned_docs/version-0.81/flatlist.md +++ b/website/versioned_docs/version-0.81/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.82/flatlist.md b/website/versioned_docs/version-0.82/flatlist.md index a7cceaf3ada..bbda4d40b01 100644 --- a/website/versioned_docs/version-0.82/flatlist.md +++ b/website/versioned_docs/version-0.82/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.83/flatlist.md b/website/versioned_docs/version-0.83/flatlist.md index a7cceaf3ada..bbda4d40b01 100644 --- a/website/versioned_docs/version-0.83/flatlist.md +++ b/website/versioned_docs/version-0.83/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.84/flatlist.md b/website/versioned_docs/version-0.84/flatlist.md index a7cceaf3ada..bbda4d40b01 100644 --- a/website/versioned_docs/version-0.84/flatlist.md +++ b/website/versioned_docs/version-0.84/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.85/flatlist.md b/website/versioned_docs/version-0.85/flatlist.md index a7cceaf3ada..bbda4d40b01 100644 --- a/website/versioned_docs/version-0.85/flatlist.md +++ b/website/versioned_docs/version-0.85/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.86/flatlist.md b/website/versioned_docs/version-0.86/flatlist.md index a7cceaf3ada..bbda4d40b01 100644 --- a/website/versioned_docs/version-0.86/flatlist.md +++ b/website/versioned_docs/version-0.86/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property. diff --git a/website/versioned_docs/version-0.87/flatlist.md b/website/versioned_docs/version-0.87/flatlist.md index 7bc9884fa34..0ccfa49aacb 100644 --- a/website/versioned_docs/version-0.87/flatlist.md +++ b/website/versioned_docs/version-0.87/flatlist.md @@ -149,7 +149,7 @@ To render multiple columns, use the [`numColumns`](flatlist.md#numcolumns) prop. More complex, selectable example below. -- By passing `extraData={selectedId}` to `FlatList` we make sure `FlatList` itself will re-render when the state changes. Without setting this prop, `FlatList` would not know it needs to re-render any items because it is a `PureComponent` and the prop comparison will not show any changes. +- Passing `extraData={selectedId}` to `FlatList` ensures that `FlatList` re-renders when `selectedId` changes. Because `FlatList` implements `PureComponent`, it only re-renders if its props change. While `renderItem` in this example is recreated on each render because it is defined inline, passing `extraData` is essential whenever `renderItem` has a stable reference (such as when memoized or defined outside the component) so that `FlatList` knows that an external dependency has updated. - `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.