ਮੇਰੀ React App 5,000 ਰਿਕਾਰਡਸ 'ਤੇ ਕਿਉਂ ਸੁਸਤ ਹੋ ਗਈ

ਮੈਂ ਇੱਕ searchable dropdown ਅਤੇ ਇੱਕ data table ਦੇ ਨਾਲ ਇੱਕ React feature ਬਣਾਇਆ।

ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ ਸਭ ਕੁਝ ਠੀਕ ਚੱਲ ਰਿਹਾ ਸੀ। ਫਿਰ ਮੈਂ ਅਸਲੀ production data ਲੋਡ ਕੀਤਾ। ਐਪ ਸੁਸਤ ਹੋ ਗਈ।

ਡ੍ਰੌਪਡਾਊਨ ਖੋਲ੍ਹਣ ਵਿੱਚ ਸੈਕਿੰਡ ਲੱਗ ਰਹੇ ਸਨ। ਸਰਚ ਬਾਕਸ ਵਿੱਚ ਟਾਈਪ ਕਰਨਾ ਲੈਗੀ (laggy) ਮਹਿਸੂਸ ਹੋ ਰਿਹਾ ਸੀ। ਐਪ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮੈਮੋਰੀ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੀ ਸੀ।

ਮੈਨੂੰ 5,000 ਯੂਜ਼ਰ ਰਿਕਾਰਡਸ ਨੂੰ ਸੰਭਾਲਣਾ ਸੀ। ਮੈਨੂੰ ਇੰਸਟੈਂਟ ਸਰਚ ਅਤੇ ਸਮੂਥ ਸਕ੍ਰੋਲਿੰਗ ਦੀ ਲੋੜ ਸੀ।

ਇੱਥੇ ਦੱਸਿਆ ਗਿਆ ਹੈ ਕਿ ਮੈਂ ਇਸਨੂੰ ਕਿਵੇਂ ਠੀਕ ਕੀਤਾ।

1. ਕੈਲਕੂਲੇਸ਼ਨਾਂ ਲਈ useMemo ਦੀ ਵਰਤੋਂ ਕਰੋ

ਮੈਂ ਹਰ ਰੈਂਡਰ (render) 'ਤੇ ਡਾਟਾ ਫਿਲਟਰ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੱਤਾ। ਮੈਂ ਫਿਲਟਰ ਕੀਤੀ ਲਿਸਟ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ useMemo ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਹ CPU ਲਈ ਬੇਲੋੜੇ ਕੰਮ ਨੂੰ ਰੋਕਦਾ ਹੈ।

2. Debouncing ਜੋੜੋ

ਹਰ ਕੀਸਟ੍ਰੋਕ (keystroke) ਨਾਲ ਸਰਚ ਟ੍ਰਿਗਰ ਹੋ ਜਾਂਦਾ ਸੀ। ਵੱਡੀਆਂ ਲਿਸਟਾਂ ਲਈ ਇਹ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਰੋਤ (expensive) ਲੈਂਦਾ ਹੈ। ਮੈਂ 300ms ਦਾ debounce ਜੋੜਿਆ। ਹੁਣ ਐਪ ਉਦੋਂ ਹੀ ਸਰਚ ਕਰਦੀ ਹੈ ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ।

3. Virtualization ਲਾਗੂ ਕਰੋ

ਇਹ ਸਭ ਤੋਂ ਵੱਡਾ ਫਿਕਸ ਸੀ। 5,000 DOM elements ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦੀ ਬਜਾਏ, ਮੈਂ react-window ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਬ੍ਰਾਊਜ਼ਰ ਹੁਣ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀਆਂ ਸਿਰਫ਼ 20 ਜਾਂ 30 ਰੋਅਜ਼ (rows) ਨੂੰ ਹੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਇਸ ਨਾਲ ਸਕ੍ਰੋਲਿੰਗ ਸਮੂਥ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਮੈਮੋਰੀ ਦੀ ਵਰਤੋਂ ਘਟ ਜਾਂਦੀ ਹੈ।

4. Re-renders ਨੂੰ ਰੋਕੋ

ਮੈਂ row components 'ਤੇ React.memo ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਮੈਂ event handlers ਲਈ useCallback ਦੀ ਵੀ ਵਰਤੋਂ ਕੀਤੀ। ਇਹ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਉਦੋਂ ਅਪਡੇਟ ਹੋਣ ਤੋਂ ਰੋਕਦਾ ਹੈ ਜਦੋਂ ਉਹਨਾਂ ਦਾ ਡਾਟਾ ਉਹੀ ਰਹਿੰਦਾ ਹੈ।

5. Server-side Pagination ਦੀ ਵਰਤੋਂ ਕਰੋ

ਮੈਂ ਸਾਰੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਇੱਕੋ ਵਾਰ ਫੈਚ (fetch) ਕਰਨਾ ਬੰਦ ਕਰ ਦਿੱਤਾ। ਮੈਂ 50 ਰਿਕਾਰਡਾਂ ਦੇ ਛੋਟੇ ਪੇਜ ਫੈਚ ਕਰਨ ਵੱਲ ਮੁੜ ਗਿਆ। ਇਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਤੇਜ਼ API ਰਿਸਪਾਂਸ ਅਤੇ ਛੋਟੇ ਡਾਟਾ ਪੇਲੋਡ (payloads) ਮਿਲਦੇ ਹਨ।

6. Material UI ਨੂੰ ਆਪਟੀਮਾਈਜ਼ ਕਰੋ

MUI Autocomplete ਵਧੀਆ ਹੈ, ਪਰ ਇਹ ਬਹੁਤ ਵੱਡੀਆਂ ਲਿਸਟਾਂ ਨਾਲ ਸੰਘਰਸ਼ ਕਰਦਾ ਹੈ। ਇਸਨੂੰ ਤੇਜ਼ ਰੱਖਣ ਲਈ ਮੈਂ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਵਿਕਲਪਾਂ ਨੂੰ ਪਹਿਲੇ 100 ਨਤੀਜਿਆਂ ਤੱਕ ਸੀਮਤ ਕਰ ਦਿੱਤਾ।

ਨਤੀਜੇ:

• ਡ੍ਰੌਪਡਾਊਨ ਦੀ ਰਫਤਾਰ: 5 ਸੈਕਿੰਡ ਤੋਂ ਘਟਾ ਕੇ 500ms ਤੋਂ ਵੀ ਘੱਟ। • ਸਰਚ ਰਿਸਪਾਂਸ: ਲੈਗੀ (laggy) ਤੋਂ ਇੰਸਟੈਂਟ। • ਮੈਮੋਰੀ ਦੀ ਵਰਤੋਂ: ਕਾਫ਼ੀ ਘਟਾਈ ਗਈ।

ਪਰਫਾਰਮੈਂਸ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਅਕਸਰ ਡਿਵੈਲਪਮੈਂਟ ਦੌਰਾਨ ਲੁਕੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ। ਉਹ ਉਦੋਂ ਸਾਹਮਣੇ ਆਉਂਦੀਆਂ ਹਨ ਜਦੋਂ ਅਸਲੀ ਡਾਟਾ ਤੁਹਾਡੇ ਯੂਜ਼ਰਾਂ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ।

ਪਹਿਲਾਂ ਆਪਣੀਆਂ ਰੁਕਾਵਟਾਂ (bottlenecks) ਨੂੰ ਮਾਪੋ। ਸਭ ਤੋਂ ਵੱਡੀਆਂ ਰੁਕਾਵਟਾਂ ਨੂੰ memoization, virtualization, ਅਤੇ debouncing ਨਾਲ ਠੀਕ ਕਰੋ।

ਕਿਹੜੀ ਆਪਟੀਮਾਈਜ਼ੇਸ਼ਨ ਨੇ ਤੁਹਾਡੀਆਂ React ਐਪਸ ਦੀ ਸਭ ਤੋਂ ਵੱਧ ਮਦਦ ਕੀਤੀ? ਮੈਨੂੰ ਕੁਮੈਂਟਸ ਵਿੱਚ ਦੱਸੋ।

ਸਰੋਤ: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9