𝗙𝗶𝘅 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
ਤੁਸੀਂ ਇੱਕ React useEffect hook ਵਿੱਚ ਇੱਕ ਟਾਈਮਰ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਹਰ ਪੰਜ ਸਕਿੰਟਾਂ ਬਾਅਦ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਆਟੋ-ਸੇਵ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਟਾਈਮਰ ਚੱਲਦਾ ਹੈ, ਪਰ ਇਹ ਇੱਕ ਖਾਲੀ ਦਸਤਾਵੇਜ਼ ਸੇਵ ਕਰਦਾ ਹੈ। ਯੂਜ਼ਰ ਨੇ ਦਸ ਪੈਰੇ ਲਿਖੇ ਹਨ, ਪਰ ਟਾਈਮਰ ਨੂੰ ਕੁਝ ਵੀ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ।
ਇਹ ਇੱਕ stale closure ਹੈ।
useEffect hook ਪਹਿਲੇ render ਤੋਂ variables ਨੂੰ capture ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ state ਨੂੰ dependency array ਤੋਂ ਬਾਹਰ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਟਾਈਮਰ ਅਤੀਤ ਵਿੱਚ ਹੀ ਰਹਿ ਜਾਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਡੇਟਾ ਦੇ ਪੁਰਾਣੇ ਵਰਜ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਜੇਕਰ ਤੁਸੀਂ state ਨੂੰ dependency array ਵਿੱਚ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਹਰ ਵਾਰ ਜਦੋਂ ਯੂਜ਼ਰ ਕੋਈ ਅੱਖਰ ਟਾਈਪ ਕਰਦਾ ਹੈ, ਟਾਈਮਰ ਰੀਸੈੱਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ performance ਨੂੰ ਖਰਾਬ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ timing logic ਨੂੰ ਵਿਗਾੜ ਦਿੰਦਾ ਹੈ।
ਤੁਸੀਂ ਇਸ ਨੂੰ Mutable Ref Pattern ਨਾਲ ਹੱਲ ਕਰ ਸਕਦੇ ਹੋ।
ਆਪਣੀ ਤਾਜ਼ਾ state ਨੂੰ ਰੱਖਣ ਲਈ useRef hook ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਟਾਈਮਰ ਨੂੰ ਨਵੇਂ renders ਨੂੰ trigger ਕੀਤੇ ਬਿਨਾਂ ਜਾਂ interval ਨੂੰ ਰੀਸੈੱਟ ਕੀਤੇ ਬਿਨਾਂ ਤਾਜ਼ਾ ਡੇਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
ਇਨ੍ਹਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ:
- ਆਪਣੀ state ਨੂੰ ਰੱਖਣ ਲਈ ਇੱਕ ref ਬਣਾਓ।
- ref ਨੂੰ ਆਪਣੀ state ਨਾਲ sync ਕਰਨ ਲਈ ਇੱਕ useEffect ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਆਪਣੇ interval ਨੂੰ ਇੱਕ ਖਾਲੀ dependency array ਦੇ ਨਾਲ ਸੈੱਟਅੱਪ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਸਿਰਫ਼ ਇੱਕ ਵਾਰ ਚੱਲੇ।
- interval callback ਦੇ ਅੰਦਰ ref ਤੱਕ ਪਹੁੰਚ ਕਰੋ।
ਇਹ ਤਰੀਕਾ ਤੁਹਾਡੇ ਟਾਈਮਰ ਨੂੰ ਤੁਹਾਡੇ ਡੇਟਾ ਤੋਂ ਵੱਖ ਕਰ ਦਿੰਦਾ ਹੈ। ਤੁਹਾਡੇ background tasks ਸਥਿਰ ਰਹਿੰਦੇ ਹਨ। ਤੁਹਾਡਾ ਡੇਟਾ ਸਹੀ ਰਹਿੰਦਾ ਹੈ।
ਚੁੱਪਚਾਪ ਹੋਣ ਵਾਲੇ bugs ਕਾਰਨ ਯੂਜ਼ਰ ਦਾ ਡੇਟਾ ਗਵਾਉਣਾ ਬੰਦ ਕਰੋ। ਆਪਣੇ asynchronous tasks ਨੂੰ ਆਪਣੇ UI ਦੇ ਨਾਲ sync ਵਿੱਚ ਰੱਖਣ ਲਈ refs ਦੀ ਵਰਤੋਂ ਕਰੋ।
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7