Выбор ответа Junior Паттерны компонентов спрашивают часто обновлено
Делит ли кастомный хук состояние
Вопрос
Два компонента вызывают один кастомный хук useCounter(). В первом нажали «+1». Что будет во втором?
function useCounter() {
const [n, setN] = useState(0);
return [n, () => setN((x) => x + 1)];
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Ничего: каждый вызов хука создаёт своё состояние. Кастомный хук делится логикой, а не данными.
Варианты ответа
- Счётчик во втором тоже увеличится: состояние хука общее
- Увеличится, если компоненты отрендерены в одном родителе
- Ничего: каждый вызов хука создаёт своё состояниеправильный ответ
- React выдаст ошибку: хук нельзя вызывать в двух компонентах
Разбор
Кастомный хук делится логикой, а не данными. Каждый вызов useState внутри него принадлежит тому компоненту, который вызвал хук. Чтобы состояние было общим, его поднимают к родителю, кладут в Context или во внешний стор.
- Хук не синглтон, это обычная функция.
- Общий родитель ничего не меняет.
- Вызывать хук в любом количестве компонентов можно.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.