У меня есть TextField (Material-UI) для ввода, На той же странице есть две таблицы с большим количеством значений. Чтобы получить значение, введенное в textField, я использовал событие onChange с setState, как показано ниже.

Проблема заключается в том, где при использовании этого метода для каждого изменения значения вызывается setState для отображения страницы при каждом изменении значения. Это приводит к замедлению отображения значения в поле, когда пользователь быстро вводит значения. Ниже приведен фрагмент кода, который можно использовать для этого.

{amp}lt;TextField onChange={this.onChange} className={classes.textField} label={Multilanguage.Translate(this.props.label)} autoFocus={true} /{amp}gt; onChange = (event) ={amp}gt; { if (event.target.value != null) { this.setState({ serial: event.target.value }); } } 

Как избежать ненужного рендеринга при изменении в TextField? Каков хороший способ справиться с этим?

Обратите внимание, что моя версия ReactJs — 16.4.0

Отставание обычно происходит, когда React выполняет ненужную работу. При каждом наборе setState ваш компонент и все его дочерние элементы в DOM перерисовываются. React не обновляет компонент, если его состояние или свойства не изменились, но даже проверка того, должен ли он повторно визуализироваться, требует значительных вычислений, которые могут привести к замедлению.

Я бы сказал, добавить следующий метод жизненного цикла для всех ваших компонентов. Это устраняет ненужные повторные рендеры. Повышение производительности было бы очевидно.

 shouldComponentUpdate = (nextProps, nextState) ={amp}gt; { return shallowCompare(this, nextProps, nextState); }, 

Изменение компонента на PureComponent является альтернативой приведенного выше кода.

Если вы используете хуки, React.memo должен сделать React.memo дело. Найдите дорогие компоненты, которые на самом деле без необходимости рендерится, и оберните их в HOC React.memo , вот так …

 Import React, {memo} ... const MyExpensiveComponent = (props) ={amp}gt; { ... render() } export default memo(MyExpensiveComponent) 

Если вы подписываетесь на контекст (например, ловушка useContext), вы можете столкнуться с некоторыми проблемами, как я. Я нашел этот пост, который стоит прочитать https://github.com/facebook/react/issues/15156#issuecomment-474590693

или прочитайте больше о памятке https://reactjs.org/docs/react-api.html#reactmemo