All thoughts and posts are my own, said by @rakibtg.
posted at Tuesday, 30 May 2017

Implementing debounce effect in React Native is not that hard, at first I was a bit confused because debounce was not working as expected.

That was a custom implementation and was not a good choice, as my project was already using lodash so I will be using the lodash debounce method in React Native. 

Though at first you may came up with an error that lodash debounce is not working with react native if you did the same mistake as I did. The reason was, I was using lodash debounce function in a render() method, which will not work. You need to define the lodash debounce function outside of the render method. 
For example,  using lodash debounce directly in onChangeText event of an text input will not work in react native.

Using lodash debounce in React Native:

Lets define the lodash debounce function in the constructor where the debounce will be listening on a custom method of the react component. 
Here is the code sample:


class MyComponent extends React.Component {

  constructor() {
    this.onChangeTextDelayed = _.debounce( this.onChangeText, 2000 )
  }

  onChangeText( text ) {
    console.log( "debouncing" )
  }

  render() {
    return <input onChangeText={ this.onChangeTextDelayed } />
  }

}


This would console log debouncing after two second once you start typing in the text input field. Hope it helps :)