И
Vlad Minenko
Особенно актуально в Formik, Final-Form
оптимизируем ререндеры
Size: a a a
2021 January 26
VM
оптимизируем ререндеры
я вот юзаю FastField у формика, но все равно медленно
𝓐
У тебя там форма на сто импутов что ли
VM
30 где-то, но у меня менеджер как сумашедший текст в вводит
VM
и говорит, что лагает
VR
Vlad Minenko
Как решаете проблему, что при очень быстром вводе в инпут он начинает жестко лагать?
1. Расставлять повсюду React.memo
2. Взять react-hook-form
2. Взять react-hook-form
V
Пусть девайс помощнее купит 🌚
И
Vlad Minenko
я вот юзаю FastField у формика, но все равно медленно
погугли “react rerender profiling” и оптимизируй то, что лагает. не “ну я юзаю компонент, лагать не должно, а оно лагает”, а “ага, вот тут есть лишние ререндеры, надо опитмизировать вот этот компонент”
VM
мне usememo не поможет
VM
значения берутся из контекста
VM
погугли “react rerender profiling” и оптимизируй то, что лагает. не “ну я юзаю компонент, лагать не должно, а оно лагает”, а “ага, вот тут есть лишние ререндеры, надо опитмизировать вот этот компонент”
ок
V
Vlad Minenko
мне usememo не поможет
Тебе не про useMemo говорят
VR
Vlad Minenko
значения берутся из контекста
Так проблема контекста в том, что при любом его изменении, все кто его используют, ререндерятся. Поэтому либо меньше обновляй контекст (debounce), либо не ререндери компоненты (React.memo), либо взять библиотеку, которая быстрее рендерит формы (RHF)
VM
Так проблема контекста в том, что при любом его изменении, все кто его используют, ререндерятся. Поэтому либо меньше обновляй контекст (debounce), либо не ререндери компоненты (React.memo), либо взять библиотеку, которая быстрее рендерит формы (RHF)
попробую мб держать валью инпутов локально, а в formik закидывать уже при onBlur
OW
Vlad Minenko
Особенно актуально в Formik, Final-Form
еще такое есть в redux-form там вообще жесть, оптимизировал свыше 100 array-field
Что именно у тебя?
Что именно у тебя?
V
Так проблема контекста в том, что при любом его изменении, все кто его используют, ререндерятся. Поэтому либо меньше обновляй контекст (debounce), либо не ререндери компоненты (React.memo), либо взять библиотеку, которая быстрее рендерит формы (RHF)
RHF не "быстрее рендерит формы"
OW
В finalForm попробуй настроить подписки. Это первый шаг к оптимизации
И
Vlad Minenko
попробую мб держать валью инпутов локально, а в formik закидывать уже при onBlur
попробуй разобраться, как профилировать. не “ну я попробую, вдруг поможет”, а “Я ВИЖУ ГДЕ ПРОБЛЕМА, ПОГУГЛЮ КАК ЕЁ РЕШАТЬ”
VR
V
Основной прирост все равно не из-за чуть более быстрых рендеров, а из-за их существенно меньшего количества за счёт неконтролируемых инпутов