Skip to content

Remove superfluous key prop #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 30, 2020
Merged

Remove superfluous key prop #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ added. An infinite-scroll that actually works and super-simple to integrate!
# install
```bash
npm install --save react-infinite-scroll-component

or
yarn add react-infinite-scroll-component

yarn add react-infinite-scroll-component

// in code ES6
import InfiniteScroll from 'react-infinite-scroll-component';
Expand Down Expand Up @@ -74,7 +74,7 @@ name | type | description
**dataLength** | number | set the length of the data.This will unlock the subsequent calls to next.
**loader** | node | you can send a loader component to show while the component waits for the next load of data. e.g. `<h3>Loading...</h3>` or any fancy loader element
**scrollThreshold** | number &#124; string | A threshold value defining when `InfiniteScroll` will call `next`. Default value is `0.8`. It means the `next` will be called when user comes below 80% of the total height. If you pass threshold in pixels (`scrollThreshold="200px"`), `next` will be called once you scroll at least (100% - scrollThreshold) pixels down.
**onScroll** | function | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
**onScroll** | function | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
**endMessage** | node | this message is shown to the user when he has seen all the records which means he's at the bottom and `hasMore` is `false`
**className** | string | add any custom class you want
**style** | object | any style which you want to override
Expand All @@ -87,4 +87,3 @@ name | type | description
**pullDownToRefreshThreshold** | number | minimum distance the user needs to pull down to trigger the refresh, `default=100px` , a lower value may be needed to trigger the refresh depending your users browser.
**refreshFunction** | function | this function will be called, it should return the fresh data that you want to show the user
**initialScrollY** | number | set a scroll y position for the component to render with.
**key** | string | the key for the current data set being shown, used when the same component can show different data sets at different times, `default=undefined`
8 changes: 2 additions & 6 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export interface Props {
onScroll?: (e: MouseEvent) => any;
dataLength: number;
initialScrollY?: number;
key?: string;
className?: string;
}

Expand Down Expand Up @@ -138,11 +137,8 @@ export default class InfiniteScroll extends Component<Props, State> {
}

UNSAFE_componentWillReceiveProps(props: Props) {
// do nothing when dataLength and key are unchanged
if (
this.props.key === props.key &&
this.props.dataLength === props.dataLength
)
// do nothing when dataLength is unchanged
if (this.props.dataLength === props.dataLength)
return;

this.actionTriggered = false;
Expand Down