𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
அனைத்திற்கும் useEffect-ஐப் பயன்படுத்துவதை நிறுத்துங்கள். பல டெவலப்பர்கள் இந்த ஹூக்கை (hook) தவறாகப் பயன்படுத்துகின்றனர். இது பிழைகளை (bugs) உருவாக்குவதோடு, குறியீட்டை (code) வாசிப்பதையும் கடினமாக்குகிறது.
useEffect பயன்பாட்டைக் குறைக்கவும்.
ஒரு பக்கத்திற்கு ஒரு useEffect மட்டுமே பயன்படுத்த முயற்சி செய்யுங்கள். ஒரே நிலைக்கு (state) பல ஹூக்குகளைப் பயன்படுத்துவது குழப்பத்தை ஏற்படுத்தும். எந்த ஹூக் எந்த நிலையை மாற்றுகிறது என்பதைக் கண்டறிவது கடினமாகிவிடும்.
பயனர் நிகழ்வுகளுக்கு (user events) useEffect-ஐப் பயன்படுத்துவதை நிறுத்துங்கள்.
கிளிக் (clicks) அல்லது டாப் (taps) செய்வதற்கு useEffect-ஐப் பயன்படுத்த வேண்டாம். அதற்குப் பதிலாக event handlers-ஐப் பயன்படுத்தவும்.
- தவறு: ஒரு கிளிக் செய்த பிறகு நிலையை (state) மாற்ற useEffect-ஐப் பயன்படுத்துவது.
- சரி: நிலையை மாற்ற onClickBar போன்ற ஒரு செயல்பாட்டைப் (function) பயன்படுத்துவது.
நீங்கள் தெரிந்து கொள்ள வேண்டிய நிகழ்வு வகைகள் (Event types):
- பக்கப் பயணம் (Page navigation) மற்றும் ஆரம்பக்கட்ட ரெண்டர்கள் (initial renders).
- நெட்வொர்க் இணைப்பு மாற்றங்கள்.
- WebSocket அல்லது நிகழ்நேர (real-time) சர்வர் அப்டேட்கள்.
கிளிக் போன்ற பயனர் செயல்கள் useEffect-ல் இருக்க வேண்டியவை அல்ல. இத்தகைய செயல்களுக்கு நேரடி event handlers-ஐப் பயன்படுத்தவும்.
Props மூலம் கூறுகளைப் (components) பிரிக்கவும்.
லாஜிக்கை (logic) மாற்ற ஒரு boolean prop-ஐப் பயன்படுத்தினால், உங்கள் கூறினைப் பிரிக்கவும். தரவை உருவாக்குவது மற்றும் புதுப்பிப்பது ஆகிய இரண்டையும் கையாளும் ஒரே கூறினை உருவாக்க வேண்டாம்.
பல "if" கூற்றுகளைக் (statements) கொண்ட ஒரு தனி கூறு மிகப்பாரியதாக வளர்ந்துவிடும். இது செயலியைப் பராமரிப்பதைக் கடினமாக்கும்.
- தவறு: படிவப் புலங்களை (form fields) மாற்றும் "isAdd" prop கொண்ட ஒரு கூறு.
- சரி: "RegisterComponent" மற்றும் "UpdateComponent" ஆகியவற்றை உருவாக்கவும்.
சிறிய கூறுகளைச் சோதனை செய்வது எளிது. அவை வேகமாக இயங்கும். அவை சுத்தமாக இருக்கும்.
ஆதாரம்: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31