useContext மற்றும் Context API எப்படி வேலை செய்கிறது?

Question

IT Interview Practice · Accepted Answer

Context ஒரு முழு subtree உடன் ஒரு மதிப்பை பகிர்ந்து கொள்ள உங்களை அனுமதிக்கிறது **ஒவ்வொரு நிலையிலும் props ஐ கடந்து செல்லாமல்** (prop drilling). நீங்கள் ஒரு context ஐ உருவாக்குகிறீர்கள், அதன் `Provider` இல் ஒரு subtree ஐ சுற்றுகிறீர்கள், மற்றும் `useContext` உடன் எந்த descendant ஐ வாசிக்கிறீர்கள். ```jsx const ThemeContext = createContext("light"); // default value function App() { return ( {/* provides to everything below */} ); } function Toolbar() { // reads the nearest provider's value — no props needed in between const theme = useContext(ThemeContext); // "dark" return

...

; } ``` ## இது எதற்கு நல்லது குறைந்த-ফ்রீக்வென்சி, "global-ish" தரவு பல components ஐ தேவை: **theme, current user, locale, feature flags**. ## பெரிய கவனம்: re-renders Provider's `value` மாறும்போது, **ஒவ்வொரு** component context ஐ consume செய்யும் re-renders செய்கிறது — இதன் ஒரு பகுதிக்கு மட்டுமே subscribe செய்ய வேண்டிய வழி இல்லை. இரண்டு நடைமுறை விளைவுகள்: ```jsx // ❌ a NEW object every render → all consumers re-render every time // ✅ memoize the value so it only changes when it really changes const value = useMemo(() => ({ user, setUser }), [user]); ``` **அடிக்கடி மாறும்** அல்லது பெரிய state க்கு, context ஐ சிறிய pieces க்கு பிரிக்கவும், அல்லது selective subscriptions ஐ support செய்யும் store (Zustand/Redux) ஐ பயன்படுத்தவும். Context ஒரு dependency-injection tool, **முழு** state manager அல்ல.

இது எதற்கு நல்லது

பெரிய கவனம்: re-renders

தொடர்புடைய கேள்விகள்