How to avoid requesting too many HTTP requests on changing Text

Question

1. I'm sending GET request on changing Text.
2. So if I recommend 'my_username' at the initial point and user changes to 'hi_user', I'm sending about 18 GET requests.

The request is like this below

url: ${ROOT_URL}/profile/unamecheck/?un=${username}
body: username
response: {valid: true}

Here is my React Code
_handleChange = async (username) => {
    this.setState({username})
    let response = await axios.get(`${ROOT_URL}/profile/unamecheck/?un=${username}`)
    if (response.status === 200) {
        if(response.data.obtained) {
          this.setState({isValidUsername: false})
        } else {
          this.setState({isValidUsername: true})
        }
    } else {

    }
    console.log('isValidUsername');
    console.log(this.state.isValidUsername);
  }

Answer 1

It isn't useful to send a request for each keystroke a user makes. There are libraries that exist to limit those requests - requests are triggered only when the user stops typing.

The debounce plugin page has a demo on its implementation - you can check it in your browser.

For react-native, the logic from this answer could be implemented (it uses lodash's debounce):

class MyComponent extends React.Component {
  constructor() {
    this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
  }

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

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