React Hook Principles
ਹਰ ਚੀਜ਼ ਲਈ useEffect ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਇਸ hook ਦੀ ਗਲਤ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਇਸ ਨਾਲ bugs ਪੈਦਾ ਹੁੰਦੇ ਹਨ ਅਤੇ ਕੋਡ ਨੂੰ ਪੜ੍ਹਨਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ।
Limit useEffect usage.
ਹਰੇਕ ਪੇਜ ਲਈ ਇੱਕ useEffect ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇੱਕੋ state ਲਈ ਬਹੁਤ ਸਾਰੇ hooks ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਉਲਝਣ ਪੈਦਾ ਹੁੰਦੀ ਹੈ। ਤੁਸੀਂ ਇਸ ਗੱਲ ਦਾ ਪਤਾ ਗੁਆ ਦਿੰਦੇ ਹੋ ਕਿ ਕਿਹੜਾ hook ਕਿਸ state ਨੂੰ ਅਪਡੇਟ ਕਰ ਰਿਹਾ ਹੈ।
Stop using useEffect for user events.
ਕਲਿੱਕ (clicks) ਜਾਂ ਟੈਪ (taps) ਲਈ useEffect ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। ਇਸ ਦੀ ਬਜਾਏ event handlers ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਗਲਤ: ਕਲਿੱਕ ਤੋਂ ਬਾਅਦ state ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ useEffect ਦੀ ਵਰਤੋਂ ਕਰਨਾ।
- ਸਹੀ: state ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ
onClickBarਵਰਗੇ function ਦੀ ਵਰਤੋਂ ਕਰੋ।
Event types you should know:
- Page navigation ਅਤੇ initial renders.
- Network connection ਵਿੱਚ ਬਦਲਾਅ।
- WebSocket ਜਾਂ real-time server updates.
ਕਲਿੱਕ ਵਰਗੇ user actions useEffect ਵਿੱਚ ਨਹੀਂ ਹੋਣੇ ਚਾਹੀਦੇ। ਇਹਨਾਂ actions ਲਈ ਸਿੱਧੇ event handlers ਦੀ ਵਰਤੋਂ ਕਰੋ।
Split components by props.
ਜੇਕਰ ਤੁਸੀਂ logic ਬਦਲਣ ਲਈ ਕਿਸੇ boolean prop ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਆਪਣੇ component ਨੂੰ ਵੰਡ ਦਿਓ। ਅਜਿਹਾ ਇੱਕ component ਨਾ ਬਣਾਓ ਜੋ ਡਾਟਾ ਬਣਾਉਣ (creating) ਅਤੇ ਅਪਡੇਟ ਕਰਨ (updating) ਦੋਵਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੋਵੇ।
ਬਹੁਤ ਸਾਰੇ "if" statements ਵਾਲਾ ਇੱਕ ਸਿੰਗਲ component ਬਹੁਤ ਵੱਡਾ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਸ ਨਾਲ ਐਪ ਨੂੰ ਮੇਨਟੇਨ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ।
- ਗਲਤ: ਇੱਕ component ਜਿਸ ਵਿੱਚ "isAdd" prop ਹੋਵੇ ਜੋ form fields ਨੂੰ ਬਦਲਦਾ ਹੈ।
- ਸਹੀ: ਇੱਕ "RegisterComponent" ਅਤੇ ਇੱਕ "UpdateComponent" ਬਣਾਓ।
ਛੋਟੇ components ਨੂੰ ਟੈਸਟ ਕਰਨਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ। ਉਹ ਤੇਜ਼ੀ ਨਾਲ ਚੱਲਦੇ ਹਨ। ਉਹ ਸਾਫ਼-ਸੁਥਰੇ ਰਹਿੰਦੇ ਹਨ।
ਸਰੋਤ: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31