Как показать в реальном времени количество персонажей с лучшей производительностью в ReactJS?

Question

У меня есть текущий счет при вводе description <TextField /> с использованием формы реакции-финала. Затем я прочитал values в <Form render={({ values }) => <MyComponent values={values} /> />.

Это <MyComponent />:

<Form render={({ values }) => (
                <Grid>
                  <Row>
                    <Col>
                      <HelperText
                        style={(values.description?.length || 0) > ADDITIONAL_CHARACTER_ON_DESCRIPTION.free ? styles.helperTextError : styles.helperText}
                        type={(values.description?.length || 0) > ADDITIONAL_CHARACTER_ON_DESCRIPTION.free ? 'error' : 'info'}
                      >
                        {values.description?.length || 0}/{ADDITIONAL_CHARACTER_ON_DESCRIPTION.free}{' '}{t('createPromotionView.helper.characters')}
                      </HelperText>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <HelperText
                        style={styles.helperText}
                      >
                        {t('createPromotionView.helper.maxDescriptionLength', {
                          descriptionMaxLength: ADDITIONAL_CHARACTER_ON_DESCRIPTION.free,
                        })}
                      </HelperText>
                    </Col>
                  </Row>
                  <Row>
                    <Col>
                      <HelperText>
                        {t('createPromotionView.helper.maxDescriptionPrice', {
                          descriptionExtraLength: ADDITIONAL_CHARACTER_ON_DESCRIPTION.amount,
                          count: ADDITIONAL_CHARACTER_ON_DESCRIPTION.creditCost
                        })}
                      </HelperText>
                    </Col>
                  </Row>
                </Grid>
) />

Как можно улучшить в лучшем случае производительность повторного рендеринга и удобство для пользователя?

Моя идея - использовать пользовательский <TextField onChange={_debounceChange} /> вместо живого изменения.