From ce0d641856c55287958e5a4ab30afb054a299f9c Mon Sep 17 00:00:00 2001 From: Spencer Ahrens Date: Mon, 6 Mar 2017 19:20:20 -0800 Subject: [PATCH] warn about PureComponent in docs Reviewed By: hramos Differential Revision: D4663872 fbshipit-source-id: cb2bd2a2d588a9419da7517304d0612e259151e3 --- Libraries/CustomComponents/Lists/FlatList.js | 6 +++++- Libraries/CustomComponents/Lists/SectionList.js | 6 +++++- Libraries/CustomComponents/Lists/VirtualizedList.js | 6 +++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/Libraries/CustomComponents/Lists/FlatList.js b/Libraries/CustomComponents/Lists/FlatList.js index b0d01655ea0..10a47cc4697 100644 --- a/Libraries/CustomComponents/Lists/FlatList.js +++ b/Libraries/CustomComponents/Lists/FlatList.js @@ -173,12 +173,16 @@ type DefaultProps = typeof defaultProps; * * - Internal state is not preserved when content scrolls out of the render window. Make sure all * your data is captured in the item data or external stores like Flux, Redux, or Relay. + * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow- + * equal. Make sure that everything your `renderItem` function depends on is passed as a prop that + * is not `===` after updates, otherwise your UI may not update on changes. This includes the + * `data` prop and parent component state. * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see * blank content. This is a tradeoff that can be adjusted to suit the needs of each application, * and we are working on improving it behind the scenes. * - By default, the list looks for a `key` prop on each item and uses that for the React key. - * Alternatively, you can provide a custom keyExtractor prop. + * Alternatively, you can provide a custom `keyExtractor` prop. */ class FlatList extends React.PureComponent, void> { static defaultProps: DefaultProps = defaultProps; diff --git a/Libraries/CustomComponents/Lists/SectionList.js b/Libraries/CustomComponents/Lists/SectionList.js index e4155bfdd76..2bc66a65aff 100644 --- a/Libraries/CustomComponents/Lists/SectionList.js +++ b/Libraries/CustomComponents/Lists/SectionList.js @@ -165,12 +165,16 @@ type DefaultProps = typeof VirtualizedSectionList.defaultProps; * * - Internal state is not preserved when content scrolls out of the render window. Make sure all * your data is captured in the item data or external stores like Flux, Redux, or Relay. + * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow- + * equal. Make sure that everything your `renderItem` function depends on is passed as a prop that + * is not `===` after updates, otherwise your UI may not update on changes. This includes the + * `data` prop and parent component state. * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see * blank content. This is a tradeoff that can be adjusted to suit the needs of each application, * and we are working on improving it behind the scenes. * - By default, the list looks for a `key` prop on each item and uses that for the React key. - * Alternatively, you can provide a custom keyExtractor prop. + * Alternatively, you can provide a custom `keyExtractor` prop. */ class SectionList> extends React.PureComponent, void> diff --git a/Libraries/CustomComponents/Lists/VirtualizedList.js b/Libraries/CustomComponents/Lists/VirtualizedList.js index 435d369d848..23a842c7c43 100644 --- a/Libraries/CustomComponents/Lists/VirtualizedList.js +++ b/Libraries/CustomComponents/Lists/VirtualizedList.js @@ -161,12 +161,16 @@ type State = {first: number, last: number}; * * - Internal state is not preserved when content scrolls out of the render window. Make sure all * your data is captured in the item data or external stores like Flux, Redux, or Relay. + * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow- + * equal. Make sure that everything your `renderItem` function depends on is passed as a prop that + * is not `===` after updates, otherwise your UI may not update on changes. This includes the + * `data` prop and parent component state. * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously * offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see * blank content. This is a tradeoff that can be adjusted to suit the needs of each application, * and we are working on improving it behind the scenes. * - By default, the list looks for a `key` prop on each item and uses that for the React key. - * Alternatively, you can provide a custom keyExtractor prop. + * Alternatively, you can provide a custom `keyExtractor` prop. * * NOTE: `LayoutAnimation` and sticky section headers both have bugs when used with this and are * therefore not officially supported yet.