Context საშუალებას გაძლევთ გაზიაროთ მნიშვნელობა მთელი ქვედა ხის გასწვრივ props-ის ყველა დონის გავლის გარეშე (prop drilling). თქვენ იქმნით context-ს, ახვეწთ ქვედა ხის მის Provider-ში, და ნებისმიერი შთამომავალი ის წაკითხავს useContext-ით.
= ();
() {
(
);
}
() {
theme = ();
;
}
დაბალი სიხშირის, "გლობალური-ისთ" მონაცემები, რომელიც ბევრ კომპონენტს სჭირდება: theme, მიმდინარე user, locale, feature flags.
Provider-ის value რომ იცვლება, ყველა კომპონენტი, რომელიც context-ს იყენებს, ხელახლა რენდერდება — არ არის გზა მხოლოდ მის ნაწილის გამოწერისთვის. ორი პრაქტიკული შედეგი:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
ხშირად მცვლელი ან დიდი state-ის სთვის, context-ი დაყავით უფრო მცირე ნაწილებად, ან გამოიყენეთ store (Zustand/Redux), რომელიც поддерживает მის მხოლოდ ნაწილის აბონირებას. Context არის dependency-injection ინსტრუმენტი, არა სრული state manager.