I recently came across an example in Angular that showed how to replicate the debounceTime functionality from rxjs:
fromEvent(this.input.nativeElement, 'keyup')
.pipe(
map(event => event.target.value),
debounceTime(400),
distinctUntilChanged(),
)
.subscribe(val => console.log(val));
Curious to try this out in React Native, I attempted my own replication:
export default function SearchScreen() {
const [text, setText] = useState('');
function onChangeHandler(event) {
of(event)
.pipe(
map(event => event.nativeEvent.text),
debounceTime(400),
)
.subscribe(val => console.log(val));
}
return (
<View>
<View>
<TextInput
value={text}
onChangeText={text => setText(text)}
onChange={onChangeHandler}
/>
</View>
</View>
);
}
Unfortunately, I couldn't figure out how to adapt the fromEvent method for React Native, so I substituted it with of. However, despite my efforts, the debounceTime functionality is not working as expected.