如何在输入反应本机时立即更新 state

Question

I am trying to take input from user and it working but on every input state is update and re render the component. I want to update state at once when user type some query. Now for example if I type 4 characters like ( enta ) then my component re-render 4 types. I want to achieve my goal if for example user type ( enta ) then I don't re-render again and again. I just want to re-render one time. Could someone please help me.

Code

 <TextInput
        style={styles.inputStyle}
        placeholder="Search medicine and health products"
        autoCapitalize="none"
        onChangeText={(input)=>{
              this.setState({
                subCategoriesShow: true,
                loader: true,
                inputValue: value,
                queries: [],
              });
              setTimeout(() => {
                console.log("2@@@@@@@@@ ", this.state.inputValue);
                axios
                  .get(
                    `${config.apiPath}/public/api/search`,
                    {
                      params: {
                        query: this.state.inputValue,
                      },
                    }
                  )
                  .then((res) => {
                    this.setState({
                      queries: res.data,
                      loader: false,
                    });
                  });
              }, 3000);
            }}
        onBlur={handleBlur}
        autoCorrect={false}
      />

Answer 1

You can set some character condition or used debounce.

import * as _ from 'lodash';

componentDidMount = () => {
    this.onChangeTextDelayed = _.debounce(this.onChangeData, 500);
}

 onChangeData = (event) => {
    //call some axios api and set the state.
}

 <TextField
      onChangeText={(event) => {
      this.state.searchText = event
      this.onChangeTextDelayed(event)/>
  }}

Answer 2

You could look into something along the lines of lodash.debounce