TextInput becomes slow after lots of typing React-native

user_6618283 0
Viewed 668

I’m very much new to React Native currently i'm building a small app using expo. Currenttly i'm facing an issue when we type in the text fields continously the textinput slowing ie, in my project if the user enters 3 numbers in first field automatically it'll move on to next field. But if we do continous data submitting the switching of input from first one to second one is bit too slow. I could'nt find any solution for this.

This is the working snack Snack

This is the code that i've tried yet

*note : Numberinput is a custom input component

  const ref = React.useRef(View.prototype);
  const firstref = React.useRef(View.prototype);

        <View style={styles.textinputViewleft}>
            <NumberInput 
            style={styles.textinput} 
            ref={firstref}
            label="Digit"
            returnKeyType="next"
            value={digit.value}
            onChangeText={(text) => { setDigit({ value: text, error: '' }); if (text.length === 3) { ref.current.focus(); } }}
            error={!!digit.error}
            errorText={digit.error}
            keyboardType="numeric"
            maxLength={3}
            minLength={3}/>
        </View>
        <View style={styles.textinputView}>
            <NumberInput 
            style={styles.textinput} 
            ref={ref}
            label="Count"
            value={count.value}
            onChangeText={(text) => setCount({ value: text, error: '' })}
            error={!!count.error}
            errorText={count.error}
            keyboardType="numeric"
            maxLength={3}/>
        </View>
react-native reactjs
1 Answers

In your example, number of unnessary render should be more than 4 time per input, I did make you an better approach using ref, check this:

let renderApp = 0;
const App = () => {
  const [inputState,setInputState] = React.useState([])
  return (
      <div>
        <div>Render App: {++renderApp}</div>
        <NumberInput setInputState={setInputState}/>
        <table>
        {inputState.map((data,i)=>(
          <tr>
            <th>Digit:{data.digit.value}</th>
            <th>Error:{data.digit.error}</th>
            <th>Count:{data.count.value}</th>
            <th>Error:{data.count.error}</th>
          </tr>
        ))}
        </table>
      </div>
  )
}
let renderInput = 0;
const NumberInput = ({setInputState}) => {
  const refs = {
    count: React.useRef(null),
    digit: React.useRef(null)
  }
  const inputHandler = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    if(value.length === 3){
      if(name === "count") {
        setInputState((prev)=>([...prev,{
          digit:{ value: refs.count.current.value, error: '' },
          count:{ value: refs.digit.current.value, error: '' }}
        ]))
      }
      refs[name].current.focus()
      refs[name].current.select();
    }
  }
  return (
    <div>
      <div>Render Inputs: {++renderInput}</div>
      <input
        ref={refs.count}
        label="Digit"
        name="digit"
        onChange={inputHandler}
        type="number"
        maxLength={3}
      />
      <input
        ref={refs.digit}
        label="Count"
        name="count"
        onChange={inputHandler}
        type="number"
        maxLength={3}
        />
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_126087140
Related