Как в связке React + Formik правильно использовать useEffect при создании input-а c подсказками?

Question

Как в связке React + Formik правильно использовать useEffect при создании input-а c подсказками?

Рейтинг: 0Ответов: 1Опубликовано: 28.02.2023

Есть задача создать масштабируемую форму на Formik с зависимыми полями и списком выпадающих вариантов. Масштабируемость достигается через FieldArray и map Field-ов. В один из Field пробрасываю кастомный инпут-прослойку, в которой через useEffect при соблюдении условий делаю запрос на бэк. Проблема в том, после запроса на бэк форма рендерится заново и теряется фокус на текущем поле инпута. Делал принудительную фокусировку через ref-ы, но тогда список подсказок появляется на секунду и снова пропадает, видимо из-за рендеров. Если не использвать useEffect, то таких проблем нет, но делать запросы на бэк по итогу необходимо. Есть идеи как можно пофиксить ?

reactjs useeffect formik

Источник: Stack Overflow на русском

Answer 1

▲ 0

тут вся проблема в ререндерах, проверь что именно ты меняешь внутри useEffect, и попробуй оптимизировать внутри map компоненты через memo и правильные id для key, key всегда должен быть одинаковый при ререндерах а не генерироваться снова, и должен быть уникальный (у меня такая же проблема была, но я делал без использования field_array из formik так как я делал через useFormik а там такое не работало хз почему, исправил ререндер выше приведенными методами)

Как в связке React + Formik правильно использовать useEffect при создании input-а c подсказками?

Ответы