From 293bb36c0e074ff3b26dfd3b30d3c74b3c3df436 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 354c6a5ff..2c45a86f8 100644 --- a/Libraries/CustomComponents/Lists/FlatList.js +++ b/Libraries/CustomComponents/Lists/FlatList.js @@ -179,12 +179,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 fee4a53a4..2b6daefe7 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 1eed99333..203d9c34d 100644 --- a/Libraries/CustomComponents/Lists/VirtualizedList.js +++ b/Libraries/CustomComponents/Lists/VirtualizedList.js @@ -163,12 +163,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.