React Context की performance की खासियतें क्या हैं, और आप उसे आधा app दोबारा render करने से कैसे रोकते हैं?

provider की value का reference बदलते ही हर consumer दोबारा render होता है, चाहे वह उस value का कोई भी हिस्सा पढ़ता हो, क्योंकि context में कोई selector नहीं होता। तो जो provider हर render पर नया बड़ा object बनाता है, वह हर consumer को लगातार दोबारा render कराता रहेगा। इसे value memoize करके, state और dispatch को अलग अलग contexts में बांटकर, या data को ऐसे बाहरी store में रखकर ठीक कीजिए जिसे consumers selectors के साथ subscribe करें।

Context पहले एक dependency injection की मशीन है और state manager बहुत बाद में। performance की दिक्कत यह है कि consumers पूरी value को subscribe करते हैं, तो जब provider की value की पहचान बदलती है, उसके नीचे का हर consumer render होता है, वह भी जो सिर्फ एक boolean पढ़ता है। सबसे पहले मैं यह देखता हूं कि provider JSX में ही inline कोई नया object तो नहीं बना रहा, क्योंकि वह हर parent render पर नया reference है और वह बाकी सब कुछ बेकार कर देता है। उसके बाद मैं contexts बांटता हूं, क्योंकि आम तौर पर data बार बार बदलता है और setters कभी बदलते ही नहीं, तो dispatch को अपने अलग context में रखने से ज्यादातर हलचल रुक जाती है। अगर फिर भी मुझे selectors चाहिए, तो मैं context को store मानने का दिखावा छोड़ देता हूं और state को असली store में रखकर useSyncExternalStore या किसी library से subscribe करता हूं ताकि हर component अपना हिस्सा चुन सके। context जिस चीज में बढ़िया बना रहता है वह है स्थिर चीजें: theme, मौजूदा user, कोई locale, कोई client instance। ये लगभग कभी नहीं बदलतीं, तो दोबारा render की लागत बेमानी है।