आप useMemo कब उठाएंगे और useCallback कब, और दोनों को कब छोड़ देंगे?

useMemo renders के बीच किसी गिनी हुई value को सहेजता है; useCallback किसी function के reference को। दोनों एक ही मशीन हैं, क्योंकि useCallback(fn, deps) असल में useMemo(() => fn, deps) है। इन्हें तब उठाइए जब कोई value सच में महंगी हो, या जब reference किसी effect की dependency हो या किसी memoized child को जाने वाला prop हो। सस्ती values के लिए दोनों छोड़ दीजिए, क्योंकि इनका हिसाब किताब मुफ्त नहीं है।

ये एक ही औजार के दो चेहरे हैं। useMemo एक value सहेजता है, useCallback एक function, और अंदर से useCallback बस वही function लौटाता useMemo है। मैं इनमें से किसी को दो ही वजहों से उठाता हूं। एक, गणना सच में महंगी है, जैसे कुछ हजार rows को sort और group करना। दो, चीज की पहचान मायने रखती है, क्योंकि वह किसी effect की dependency है या React.memo में लिपटे किसी component को जाने वाला prop है। अगर इनमें से कुछ भी सच नहीं है तो मैं उसे छोड़ देता हूं, क्योंकि हर memo call भी एक तुलना और थोड़ी memory खर्च करती है, और code पढ़ने में ज्यादा शोर भरा हो जाता है। असल में मैं सबसे पहले React Profiler खोलकर देखता हूं कि दोबारा render होने की कोई कीमत है भी या नहीं। ज्यादातर बार असली हल memo नहीं होता, वह state को उसके इस्तेमाल की जगह के करीब ले जाना होता है ताकि आधा पेड़ render होना ही बंद कर दे। और React Compiler चालू किए नए projects में हाथ से की जाने वाली बहुत सी memoization खत्म हो जाती है, जिससे मैं खुश हूं; उसके बिना code बेहतर पढ़ा जाता है।