5,000 பதிவுகளைக் கொண்டபோது எனது React App ஏன் மெதுவாக மாறியது
தேடக்கூடிய ஒரு dropdown மற்றும் ஒரு data table வசதியுடன் ஒரு React feature-ஐ நான் உருவாக்கினேன்.
மேம்படுத்தும் (development) போது அனைத்தும் சரியாக வேலை செய்தது. பின்னர் நான் உண்மையான production தரவுகளைப் பதிவேற்றியபோது, ஆப் மெதுவாக மாறியது.
Dropdown திறக்க பல வினாடிகள் ஆனது. தேடல் பெட்டியில் (search box) தட்டச்சு செய்வது தாமதமாக (laggy) இருந்தது. ஆப் அதிக நினைவகத்தைப் (memory) பயன்படுத்தியது.
நான் 5,000 பயனர் பதிவுகளைக் கையாள வேண்டியிருந்தது. எனக்கு உடனடித் தேடல் மற்றும் தடையற்ற ஸ்க்ரோலிங் (smooth scrolling) தேவைப்பட்டது.
நான் இதை எவ்வாறு சரி செய்தேன் என்பது இதோ.
கணக்கீடுகளுக்கு useMemo-வைப் பயன்படுத்துங்கள் ஒவ்வொரு render செய்யும் போதும் தரவுகளை வடிகட்டுவதை (filtering) நான் நிறுத்தினேன். வடிகட்டப்பட்ட பட்டியலைச் சேமிக்க useMemo-வைப் பயன்படுத்தினேன். இது CPU-வின் தேவையற்ற வேலைகளைத் தவிர்க்கிறது.
Debouncing-ஐச் சேர்க்கவும் ஒவ்வொரு முறை தட்டச்சு செய்யும் போதும் தேடல் செயல்பாடு (search) தூண்டப்பட்டது. பெரிய பட்டியல்களுக்கு இது அதிகச் சுமையை ஏற்படுத்தும். நான் 300ms debounce-ஐச் சேர்த்தேன். இப்போது பயனர் தட்டச்சு செய்வதை நிறுத்திய பின்னரே ஆப் தேடும்.
Virtualization-ஐச் செயல்படுத்தவும் இதுதான் மிகப்பெரிய தீர்வாக இருந்தது. 5,000 DOM கூறுகளை (elements) render செய்வதற்குப் பதிலாக, நான் react-window-ஐப் பயன்படுத்தினேன். இப்போது திரையில் தெரியும் 20 அல்லது 30 வரிசைகளை மட்டுமே பிரவுசர் render செய்கிறது. இது ஸ்க்ரோலிங்கைத் தடையற்றதாக மாற்றுகிறது மற்றும் நினைவகப் பயன்பாட்டைக் குறைக்கிறது.
Re-renders-ஐத் தவிர்க்கவும் வரிசை கூறுகளில் (row components) React.memo-வைப் பயன்படுத்தினேன். நிகழ்வு கையாளுதல்களுக்கு (event handlers) useCallback-ஐயும் பயன்படுத்தினேன். இது தரவுகள் மாறாதபோது துணை கூறுகள் (child components) புதுப்பிக்கப்படுவதைத் தடுக்கிறது.
Server-side Pagination-ஐப் பயன்படுத்துங்கள் அனைத்து பயனர்களையும் ஒரே நேரத்தில் பெறுவதை நான் நிறுத்தினேன். 50 பதிவுகள் கொண்ட சிறிய பக்கங்களாகப் பெறுவதற்கு மாறினேன். இது வேகமான API பதில்களையும் சிறிய தரவுப் பரிமாற்றங்களையும் (data payloads) வழங்குகிறது.
Material UI-ஐ மேம்படுத்தவும் MUI Autocomplete சிறப்பானது, ஆனால் மிகப்பெரிய பட்டியல்களுடன் இது சிரமப்படுகிறது. வேகத்தைத் தக்கவைக்க, காட்டப்படும் விருப்பங்களை முதல் 100 முடிவுகளுக்கு மட்டும் நான் மட்டுப்படுத்தினேன்.
முடிவுகள்:
• Dropdown வேகம்: 5 வினாடிகளிலிருந்து 500ms-க்கும் குறைவாக மாறியது. • தேடல் பதில்: தாமதத்திலிருந்து (laggy) உடனடித் தேடலாக மாறியது. • நினைவகப் பயன்பாடு: கணிசமாகக் குறைந்தது.
செயல்திறன் சிக்கல்கள் (Performance issues) பெரும்பாலும் மேம்படுத்தும் போது மறைந்திருக்கும். உண்மையான தரவுகள் பயனர்களைச் சென்றடையும் போது அவை வெளிப்படும்.
முதலில் உங்கள் தடைகளை (bottlenecks) அளவிடுங்கள். memoization, virtualization மற்றும் debouncing மூலம் பெரிய சிக்கல்களைச் சரிசெய்யுங்கள்.
எந்த optimization உங்கள் React ஆப்ஸிற்கு மிகவும் உதவியாக இருந்தது? கருத்துகளில் (comments) சொல்லுங்கள்.
ஆதாரம்: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9