При каждом вводе в поиск перерисовываются все компоненты, читающие контекст пользователя
function App() {
const [user, setUser] = useState(null);
const [search, setSearch] = useState('');
return (
<UserContext.Provider value={{ user, setUser }}>
<SearchBar value={search} onChange={setSearch} />
<Layout />
</UserContext.Provider>
);
}
Профайлер показывает: при каждом символе в поиске перерисовываются все 40 компонентов, которые вызывают useContext(UserContext), хотя пользователь не менялся. Почему?
- В value на каждом рендере App создаётся новый объект — потребители видят «изменение»
- useContext всегда перерисовывает компонент при рендере провайдера, это нельзя изменить
- SearchBar и Layout находятся в одном провайдере, поэтому делят состояние
- Контекст нельзя использовать вместе с useState в одном компоненте