𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀
ਸਾਫ਼ React ਕੋਡ ਲਿਖਣ ਲਈ ਸਮਾਰਟ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਗਲਤ ਸਟੇਟ ਪੈਟਰਨਾਂ ਕਾਰਨ ਬੱਗ (bugs) ਅਤੇ ਗੁੰਝਲਦਾਰ ਕੋਡ ਪੈਦਾ ਹੁੰਦੇ ਹਨ।
ਇਹਨਾਂ ਚਾਰ ਆਮ ਗਲਤੀਆਂ ਤੋਂ ਬਚੋ:
- ਸਬੰਧਤ ਡੇਟਾ ਨੂੰ ਇਕੱਠਾ ਕਰੋ (Group related data)
ਉਹਨਾਂ ਵੈਲਯੂਜ਼ (values) ਲਈ ਵੱਖਰੇ ਸਟੇਟ ਹੁੱਕਸ (state hooks) ਨਾ ਬਣਾਓ ਜੋ ਇਕੱਠੇ ਬਦਲਦੇ ਹਨ।
ਇਸ ਦੀ ਬਜਾਏ:
- const [x, setX] = useState(0);
- const [y, setY] = useState(0);
ਇੱਕ ਆਬਜੈਕਟ (object) ਦੀ ਵਰਤੋਂ ਕਰੋ:
- const [position, setPosition] = useState({ x: 0, y: 0 });
ਇਹ ਤੁਹਾਡੀਆਂ ਅਪਡੇਟਸ ਨੂੰ ਸਾਫ਼ ਅਤੇ ਸੰਗਠਿਤ ਰੱਖਦਾ ਹੈ।
- ਟਕਰਾਅ ਵਾਲੀਆਂ ਸਟੇਟਸ (conflicting states) ਤੋਂ ਬਚੋ
ਜਦੋਂ ਕਈ ਬੂਲੀਅਨ (booleans) ਇੱਕੋ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਟ੍ਰੈਕ ਕਰਦੇ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਬੱਗ ਪੈਦਾ ਕਰਦੇ ਹੋ।
ਇਹ ਰੱਖਣ ਦੀ ਬਜਾਏ:
- isSubmitting
- isSubmit
ਇੱਕ ਸਿੰਗਲ ਸਟੇਟਸ ਸਟ੍ਰਿੰਗ (status string) ਦੀ ਵਰਤੋਂ ਕਰੋ:
- status: 'TYPING'
- status: 'SUBMITTING'
- status: 'SUBMITTED'
ਆਪਣੀ UI ਲੌਜਿਕ (logic) ਨੂੰ ਇਸ ਸਿੰਗਲ ਸੋਰਸ ਆਫ਼ ਟ੍ਰੂਥ (single source of truth) ਤੋਂ ਪ੍ਰਾਪਤ ਕਰੋ।
- ਵਾਧੂ (redundant) ਸਟੇਟ ਨੂੰ ਹਟਾਓ
ਜੇਕਰ ਤੁਸੀਂ ਰੈਂਡਰ (render) ਦੌਰਾਨ ਕਿਸੇ ਵੈਲਯੂ ਦੀ ਗਣਨਾ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਂ ਉਸਨੂੰ ਸਟੇਟ ਵਿੱਚ ਨਾ ਰੱਖੋ।
ਇਹਨਾਂ ਨੂੰ ਸਟੋਰ ਨਾ ਕਰੋ:
- firstName
- lastName
- fullName
ਸਿਰਫ਼ ਪਹਿਲੇ ਅਤੇ ਆਖਰੀ ਨਾਮ ਨੂੰ ਸਟੋਰ ਕਰੋ। ਫੁੱਲ ਨਾਮ ਦੀ ਗਣਨਾ ਤੁਰੰਤ (on the fly) ਕਰੋ:
- const fullName = firstName + " " + lastName;
ਇਸ ਤੋਂ ਇਲਾਵਾ, props ਨੂੰ ਕਦੇ ਵੀ ਸਟੇਟ ਵਿੱਚ ਸਟੋਰ ਨਾ ਕਰੋ। ਸਟੇਟ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਸ਼ੁਰੂ (initialize) ਹੁੰਦੀ ਹੈ। ਜੇਕਰ ਤੁਹਾਡਾ prop ਬਦਲਦਾ ਹੈ, ਤਾਂ ਸਟੇਟ ਅਪਡੇਟ ਨਹੀਂ ਹੋਵੇਗੀ। ਸਿੱਧਾ prop ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਡੇਟਾ ਦੀ ਦੁਹਰਾਓ (duplicating) ਨੂੰ ਰੋਕੋ
ਇੱਕੋ ਡੇਟਾ ਨੂੰ ਦੋ ਵੱਖ-ਵੱਖ ਸਟੇਟਸ ਵਿੱਚ ਸਟੋਰ ਨਾ ਕਰੋ।
ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਕੰਮਾਂ (tasks) ਦੀ ਇੱਕ ਸੂਚੀ ਅਤੇ ਇੱਕ ਚੁਣਿਆ ਹੋਇਆ ਕੰਮ ਹੈ, ਤਾਂ ਪੂਰੇ task object ਨੂੰ ਦੋਵਾਂ ਥਾਵਾਂ 'ਤੇ ਸਟੋਰ ਨਾ ਕਰੋ। ਇਸ ਨਾਲ ਅਪਡੇਟ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ।
ਇਸ ਦੀ ਬਜਾਏ:
- ਕੰਮਾਂ (tasks) ਦੀ ਸੂਚੀ ਨੂੰ ਸਟੋਰ ਕਰੋ।
- ਸਿਰਫ਼ selectedTaskId ਨੂੰ ਸਟੋਰ ਕਰੋ।
- ਰੈਂਡਰ ਦੌਰਾਨ ਉਸ ID ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੂਚੀ ਵਿੱਚੋਂ task ਲੱਭੋ।
ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਚੁਣਿਆ ਹੋਇਆ task ਹਮੇਸ਼ਾ ਤੁਹਾਡੀ ਸੂਚੀ ਵਿੱਚ ਸਭ ਤੋਂ ਨਵੇਂ ਡੇਟਾ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ।
Source: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9