ES2023 ਸਪੈਸੀਫਿਕੇਸ਼ਨ ਹੁਣ ਚਾਰ ਐਰੇ ਮੈਥਡਸ—toSorted, toReversed, toSpliced ਅਤੇ with—ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ ਜੋ ਅਸਲ ਐਰੇ ਨੂੰ ਮਿਊਟੇਟ ਕਰਨ ਦੀ ਬਜਾਏ ਨਵੇਂ ਐਰੇ ਵਾਪਸ ਕਰਦੇ ਹਨ। React ਅਤੇ ਹੋਰ UI ਲਾਇਬ੍ਰੇਰੀਆਂ ਵਿੱਚ ਜੋ ਇਮਿਊਟੇਬਲ ਸਟੇਟ (immutable state) 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ, ਇਹ ਹੈਲਪਰਜ਼ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਸਪ੍ਰੈਡ-ਓਪਰੇਟਰ (spread-operator) ਵਾਲੀਆਂ ਉਹ ਟ੍ਰਿਕਸ ਹਟਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਜੋ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਬੱਗਸ (bugs) ਅਤੇ ਵਾਧੂ ਕੋਡ (boilerplate) ਦਾ ਕਾਰਨ ਰਹੀਆਂ ਹਨ।
ਇਹ ਬਦਲਾਅ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ
React ਇਹ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਕਿਸੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰੀ-ਰੈਂਡਰ (re-render) ਕਰਨਾ ਹੈ ਜਾਂ ਨਹੀਂ, ਪਿਛਲੇ ਸਟੇਟ ਰੈਫਰੈਂਸ ਦੀ ਨਵੇਂ ਰੈਫਰੈਂਸ ਨਾਲ ਤੁਲਨਾ ਕਰਕੇ। ਜੇਕਰ ਰੈਫਰੈਂਸ ਨਹੀਂ ਬਦਲਦਾ, ਤਾਂ React ਮੰਨ ਲੈਂਦਾ ਹੈ ਕਿ ਕੁਝ ਵੀ ਨਹੀਂ ਬਦਲਿਆ। ਕਲਾਸਿਕ Array.prototype.sort ਮੈਥਡ ਐਰੇ ਨੂੰ ਉਸੇ ਜਗ੍ਹਾ 'ਤੇ ਸੌਰਟ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹੀ ਰੈਫਰੈਂਸ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ setTasks(prev => prev.sort(fn)) ਵਰਗੀ ਕਾਲ React ਨੂੰ ਅਪਡੇਟ ਬਾਰੇ ਅਣਜਾਣ ਰੱਖਦੀ ਹੈ। UI ਪੁਰਾਣੇ ਡੇਟਾ (stale data) 'ਤੇ ਹੀ ਰੁਕਿਆ ਰਹਿੰਦਾ ਹੈ, ਜੋ ਕਿ ਅਸਲ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਅਕਸਰ ਦੇਖਣ ਨੂੰ ਮਿਲਣ ਵਾਲਾ ਇੱਕ ਬੱਗ ਹੈ।
ਡਿਵੈਲਪਰਾਂ ਨੇ ਪਹਿਲਾਂ ਐਰੇ ਨੂੰ ਕਲੋਨ (clone) ਕਰਕੇ ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕੱਢਿਆ ਹੈ—ਆਮ ਤੌਰ 'ਤੇ ਸਪ੍ਰੈਡ ਓਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ—ਤਾਂ ਜੋ ਸੌਰਟਿੰਗ ਸਟੈਪ ਇੱਕ ਨਵਾਂ ਰੈਫਰੈਂਸ ਪੈਦਾ ਕਰ ਸਕੇ:
setTasks(prev => [...prev].sort((a, b) => b.priority - a.priority));
ਉਹ ਪੈਟਰਨ ਕੰਮ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਵਾਧੂ ਕੋਡ (noise) ਵਧਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਭੁੱਲ