Выбор ответа Middle Context и стейт-менеджеры спрашивают часто обновлено
Объект-литерал в value провайдера
Вопрос
Что не так с этим провайдером, если потребителей десятки?
const AuthContext = createContext(null);
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = (u) => setUser(u);
const logout = () => setUser(null);
return (
<AuthContext value={{ user, login, logout }}>
{children}
</AuthContext>
);
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: value новый на каждом рендере, все потребители перерисовываются. { user, login, logout } это новый объект на каждом рендере.
Варианты ответа
- Ничего: React сравнивает объекты в
valueповерхностно - Нельзя класть функции в контекст, только сериализуемые данные
valueновый на каждом рендере, все потребители перерисовываютсяправильный ответ- Контекст нужно создавать внутри компонента, а не снаружи
Разбор
{ user, login, logout } это новый объект на каждом рендере. React сравнивает value через Object.is, а не поверхностно, поэтому любой рендер AuthProvider (например, из-за его родителя) будит всех потребителей. Лечат useMemo для значения, useCallback для функций или разделением на два контекста. С включённым React Compiler мемоизация будет автоматической.
- Поверхностного сравнения у контекста нет.
- Функции в контексте допустимы и встречаются постоянно.
- Создавать контекст внутри компонента как раз нельзя: на каждом рендере получится новый контекст.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.