Выбор ответа Middle Паттерны компонентов обновлено
Контролируемый режим своего компонента
Вопрос
Компонент Toggle должен работать и как <Toggle defaultOn />, и как <Toggle on={on} onChange={setOn} />. Как правильно определить, кто хранит состояние?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Если on не undefined, брать его, иначе внутренний state с defaultOn. Так ведут себя нативные поля: value делает поле контролируемым, defaultValue задаёт начальное значение неконтролируемого.
Варианты ответа
- Хранить состояние внутри и синхронизировать с пропсом
onчерезuseEffect - Смотреть на
onChange: если он передан, компонент контролируемый - Если
onнеundefined, брать его, иначе внутренний state сdefaultOnправильный ответ - Брать
onиз пропса, аdefaultOnигнорировать как устаревший проп
Разбор
Так ведут себя нативные поля: value делает поле контролируемым, defaultValue задаёт начальное значение неконтролируемого. Внутреннее состояние меняется только в неконтролируемом режиме, а onChange вызывается в обоих.
- Синхронизация через эффект даёт лишний рендер и рассинхрон: два источника правды.
onChangeможет быть передан и в неконтролируемом режиме, просто чтобы узнавать об изменениях.- Игнорировать
defaultOnзначит не поддержать неконтролируемый режим.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.