1

I am working on React JS application where multiple type of the questions and multiple type of fields are in the form. I will post the code only for the one type of question.

To update the state:-

 const handleChange = ( e: string, qInd: number ): void => {
    const previousState: any = [...state.freeTextAnswers]; // copying the old datas array
    previousState[qInd] = e;
    setState( prevState => {
      return {
        ...prevState,
        freeTextAnswers: previousState};
      })
}

Render Part is:

<FormControl
                    className="border border-info "
                    as="textarea"
                    name={`questions.question-${props.index}-${question.question_type_id}[${qInd}].text`}
                    onChange={(
                      ev: React.ChangeEvent<HTMLTextAreaElement>,
                    ): void => handleChange(ev.target.value, qInd)}
                    minLength={5}
                    autoComplete="off"
                    maxLength={question.char_limit_answer}
                    disabled={currentProgress === 4 ? true : false }
                    readOnly={ currentProgress === 4 ? true : false }
                    id={`questions.question-${index}-${question.question_type_id}[${qInd}].text`}
                  />
              <FormError touched={props.formik.touched} subpath={`question-${index}-${question.question_type_id}[${qInd}]`}  errors = {formik.errors} path={`question-${props.index}-${question.question_type_id}-${qInd}`} />

I am using Formik and handle the event manually just for speedup

useEffect(() => {
  if( question ){
    const freeTextAnswers = state.freeTextAnswers;
    const getFreeAnswers = me.map((a, index) => ({
        answer_id: a.answer_id,
        option_answer_id: a.option_answer_id,
        text: freeTextAnswers[index] ? freeTextAnswers[index] : '',
        question_id: question.question_id,
        is_predefined: false
    }));
    props.formik.setFieldValue(`questions.question-${props.index}-${question.question_type_id}`, getFreeAnswers)
  }
}, [state.freeTextAnswers])

This above snippet of code is making it slower. How can I speed it up so every time state change it doesn't enter in the useEffect and make it slower.

Vikash Dhiman
  • 570
  • 5
  • 16

1 Answers1

0

By "slower" do you mean to say that it is running on each render? If so, you can use a debounce on the input, so that it will only fire once the user has "finished" typing out the input.

ParthianShotgun
  • 602
  • 4
  • 20