Can rxjs control the maximum frequency of a function call? - reactjs

Question

I am making a react-native app. Since the onEndReached props in FlatList is problematic, onEndReached can be triggered more than once when the end is reached.
I have heard of rxjs that can make a button's onPress only be triggered once with some condition even user is clicking on it multiple times.
Below is the Flatlist:
<FlatList
data={paginatedList}
ListHeaderComponent={() => this.renderHeader()}
renderItem={({item, index}) => this.renderItem(item, index)}
onEndReachedThreshold={0}
onEndReached={(distanceFromEnd) => {
console.log(distanceFromEnd);
this.setState({normalListLength: normalListLength + 10})
}}
/>
I want the this.setState function to be limited to once per seconds (1000ms) . Is that I should use rxjs to do this?

Answer 1

So one possible solution could be to have a Subject which you can next() the new value (distanceFromEnd) into. And then you can apply any combination of operators (including debounceTime) to enforce the frequency limiting.
Keep in mind my React syntax might not be spot on
<FlatList
data={paginatedList}
ListHeaderComponent={() => this.renderHeader()}
renderItem={({item, index}) => this.renderItem(item, index)}
onEndReachedThreshold={0}
onEndReached={(distanceFromEnd) => {
console.log(distanceFromEnd);
myOnEndReachedSubject.next(distanceFromEnd);
this.setState({normalListLength: normalListLength + 10})
}}
/>
// elsewhere define subject
myOnEndReachedSubject = new Subject<number>();
// ....elsewhere in a lifecycle function
componentDidMount() {
myOnEndReachedSubject
.debounceTime(1000) // debounce for a second
.distinctUntilChanged()
.subscribe((distance) => {
// Do something with distance
// setState etc
});
}