ਪਹਿਲਾਂ ਮਾਪੋ, ਫਿਰ ਅਸਲ ਕਾਰਨ ਨੂੰ ਠੀਕ ਕਰੋ — ਅਨੁਮਾਨ ਦੇ ਆਧਾਰ ਤੇ ਹਰ ਜਗ੍ਹਾ useMemo ਨੂੰ ਛਿੜਕਾਵਾਂ ਨਾ ਕਰੋ।
React DevTools Profiler ਦੀ ਵਰਤੋਂ ਕਰੋ ("Highlight updates when components render" ਨੂੰ ਸਮਰਥ ਕਰੋ)। ਇਹ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਹੜੇ ਭਾਗ ਰੀ-ਰੈਂਡਰ ਹੋਏ ਅਤੇ ਕਿਉਂ (props ਬਦਲਿਆ, state ਬਦਲਿਆ, ਮਾਤਾ-ਪਿਤਾ ਭਾਗ ਰੀ-ਰੈਂਡਰ ਹੋਇਆ, context ਬਦਲਿਆ)।
ਨੂੰ ਹਰਾਉਂਦੀ ਹੈ:
React.memo// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context ਮੁੱਲ ਹਰ ਰੈਂਡਰ ਵਿੱਚ ਮੁੜ ਬਣਾਇਆ ਗਿਆ → ਸਾਰੇ ਸੰਭਾਲਣ ਵਾਲੇ ਰੀ-ਰੈਂਡਰ। value ਨੂੰ memoize ਕਰੋ ਜਾਂ contexts ਨੂੰ ਵੰਡੋ।
3. State ਬਹੁਤ ਉਪਰ ਰੱਖਿਆ ਗਿਆ। State ਨੂੰ ਘਟਾ ਕੇ ਰੱਖਣ ਤੋਂ ਤਾਂ ਕਿ ਘੱਟ ਭਾਗ ਇਸ ਤੇ ਨਿਰਭਰ ਹੋਣ, ਅਕਸਰ ਸਭ ਤੋਂ ਵੱਡਾ ਜਿੱਤ ਹੈ:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Render ਵਿੱਚ ਮਹਿੰਗਾ ਕੰਮ → useMemo ਵਿੱਚ ਲਪੇਟੋ।
Re-renders ਆਮ ਤੌਰ ਤੇ ਸਸਤੇ ਹਨ — React ਤੇਜ਼ ਹੈ। ਜ਼ਿਆਦਾਤਰ "ਅਨੁਕੂਲਨ" ਪਰਿਮਾਣ ਯੋਗ ਲਾਭ ਦੇ ਬਿਨਾਂ ਜਟਿਲਤਾ ਜੋੜਦੇ ਹਨ। ਢਾਂਚਾ ਸੁਧਾਰ (colocating state, ਹਜ਼ਾਰਾਂ ਕਤਾਰਾਂ ਲਈ list virtualization) ਨੂੰ memos ਨੂੰ ਖਿੰਡੇ ਕਰਨ ਉੱਤੇ ਤਰਜੀਹ ਦਿਓ। Profiler ਦੇ ਦੁਆਰਾ ਪ੍ਰਕਟ ਕੀਤੇ ਖਾਸ hotspots ਨੂੰ ਅਨੁਕੂਲ ਕਰੋ, ਅਤੇ ਇਹ ਯਕੀਨੀ ਕਰਨ ਲਈ ਮੁੜ ਮਾਪੋ ਕਿ ਸੁਧਾਰ ਸੱਚਮੁੱਚ ਮਦਦ ਕੀਤੀ।