Реактивные формы 🚀
#frontend #react

Работая с библиотекой React, важно отслеживать производительность интерфейса и его компонентов. Самый простой способ оптимизации производительности — уменьшение количества повторных рендерингов компонентов при пользовательском взаимодействии с ними.

Рассмотрим пример простого, но часто достаточно нагруженного компонента — формы ввода данных. Подобный код можно встретить как в туториалах, так и в реальных проектах. Поле, значение, state… — на первый взгляд все так 🤔

Но, используя state, мы заставляем ререндериться всю форму при каждом изменении значения поля input. Если форма обладает большим количеством разнородных полей, например, служит для фильтрации товаров в разделе интернет-магазина, то большое количество ее ререндеров негативно скажется на общей производительности интерфейса.

Именно смена состояния компонента вызывает его дополнительные перерисовки, которые могут являться избыточными. Вместо того чтобы перезаписывать state, используйте ref-ссылку 🥳

После внимательного просмотра нашей формы становится очевидно, что состояние поля ввода input необходимо только перед ее непосредственной отправкой на сервер. Тогда можно получить ссылку на DOM-элемент input и передать его значение в обработчике отправки формы. Пример оптимизированного кода с использованием ref смотрите здесь.

Такой подход в лоб может применяться для простых компонентов. Для более комплексных решений мы рекомендуем рассмотреть библиотеку react-hook-form. Под капотом она использует схожую с нашим примером механику и применяет ref-ссылки для получения доступа к значению поля.