𝗙𝗶𝘅 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀
તમે React useEffect hook માં એક ટાઈમર બનાવો છો. તમે દર પાંચ સેકન્ડે દસ્તાવેજને (document) ઓટો-સેવ કરવા માંગો છો. ટાઈમર ચાલે છે, પરંતુ તે ખાલી દસ્તાવેજ સેવ કરે છે. વપરાશકર્તાએ દસ ફકરા લખ્યા છે, પરંતુ ટાઈમરને કંઈ દેખાતું નથી.
આ એક stale closure છે.
useEffect hook પ્રથમ render માંથી વેરિએબલ્સને કેપ્ચર કરે છે. જો તમે dependency array માંથી state ને બહાર રાખશો, તો ટાઈમર ભૂતકાળમાં અટકી જશે. તે તમારા ડેટાનું જૂનું વર્ઝન વાપરશે.
જો તમે dependency array માં state ઉમેરો છો, તો જ્યારે પણ વપરાશકર્તા કોઈ અક્ષર ટાઈપ કરે છે ત્યારે ટાઈમર રિસેટ થઈ જાય છે. આનાથી પરફોર્મન્સ બગડે છે અને તમારું timing logic ખોરવાય છે.
તમે આ સમસ્યાને Mutable Ref Pattern થી ઉકેલી શકો છો.
તમારા લેટેસ્ટ state ને રાખવા માટે useRef hook નો ઉપયોગ કરો. આ તમારા ટાઈમરને નવા renders ટ્રિગર કર્યા વગર અથવા interval ને રિસેટ કર્યા વગર તાજો (fresh) ડેટા મેળવવાની મંજૂરી આપે છે.
આ સ્ટેપ્સ અનુસરો:
- તમારા state ને રાખવા માટે એક ref બનાવો.
- ref ને તમારા state સાથે સિંક કરવા માટે useEffect નો ઉપયોગ કરો.
- તમારા interval ને ખાલી dependency array સાથે સેટ કરો જેથી તે ફક્ત એક જ વાર ચાલે.
- interval callback ની અંદર ref નો ઉપયોગ કરો.
આ અભિગમ તમારા ટાઈમરને તમારા ડેટાથી અલગ (decouple) કરે છે. તમારા background tasks સ્થિર રહે છે. તમારો ડેટા સચોટ રહે છે.
સાયલન્ટ બગ્સ (silent bugs) ને કારણે વપરાશકર્તાનો ડેટા ગુમાવવાનું બંધ કરો. તમારા asynchronous tasks ને તમારા UI સાથે સિંક રાખવા માટે refs નો ઉપયોગ કરો.
Source: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7