UI ਨੂੰ ਬਲਾਕ ਕਰਨਾ ਬੰਦ ਕਰੋ: React ਵਿੱਚ Interruptible Rendering
React renders ਤੁਹਾਡੇ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ (user interface) ਨੂੰ ਫ੍ਰੀਜ਼ ਕਰ ਸਕਦੇ ਹਨ।
ਭਾਰੀ ਕੰਪਿਊਟੇਸ਼ਨਾਂ (Heavy computations) ਮੇਨ ਥ੍ਰੈਡ (main thread) ਨੂੰ ਬਲਾਕ ਕਰ ਦਿੰਦੀਆਂ ਹਨ। ਤੁਹਾਡੇ ਯੂਜ਼ਰਸ ਨੂੰ ਇੱਕ ਫ੍ਰੀਜ਼ ਹੋਈ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। ਇਹ ਅਨੁਭਵ ਨੂੰ ਖਰਾਬ ਕਰਦਾ ਹੈ।
Interruptible rendering ਇਸ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੀ ਹੈ। ਇਹ React ਨੂੰ ਯੂਜ਼ਰ ਇਨਪੁਟ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੰਮ ਨੂੰ ਰੋਕਣ (pause ਕਰਨ) ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ।
ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
- React ਕੰਮ ਨੂੰ ਛੋਟੇ-ਛੋਟੇ ਹਿੱਸਿਆਂ (chunks) ਵਿੱਚ ਵੰਡ ਦਿੰਦਾ ਹੈ।
- ਇਹ ਕਲਿੱਕ ਜਾਂ ਟਾਈਪਿੰਗ ਵਰਗੇ ਉੱਚ-ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲੇ ਕੰਮਾਂ (high priority tasks) ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ।
- ਜੇਕਰ ਕੋਈ ਯੂਜ਼ਰ ਇੰਟਰੈਕਟ ਕਰਦਾ ਹੈ, ਤਾਂ React ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ।
- React ਪਹਿਲਾਂ ਇਨਪੁਟ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।
- React ਬਾਅਦ ਵਿੱਚ ਬੈਕਗ੍ਰਾਊਂਡ ਟਾਸਕ ਨੂੰ ਦੁਬਾਰਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦਾ ਹੈ।
ਇਸ ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਲਈ ਤੁਸੀਂ transitions ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ। ਗੈਰ-ਜ਼ਰੂਰੀ ਅਪਡੇਟਸ (non-urgent updates) ਨੂੰ ਮਾਰਕ ਕਰਨ ਲਈ useTransition ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ React ਨੂੰ UI ਨੂੰ ਰਿਸਪੌਂਸਿਵ (responsive) ਰੱਖਣ ਲਈ ਕਹਿੰਦਾ ਹੈ।
ਭਾਰੀ ਡੇਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਨੂੰ ਆਪਣੇ ਐਪ ਦੀ ਪਰਫਾਰਮੈਂਸ ਖਰਾਬ ਨਾ ਕਰਨ ਦਿਓ।
Source: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb