React ਤੁਹਾਨੂੰ ਇੱਕ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਡੇਟਾ ਨੂੰ ਜਿਉਂਦਾ ਰੱਖਣ ਦੇ ਦੋ ਤਰੀਕੇ ਦਿੰਦਾ ਹੈ: useState ਅਤੇ useRef। ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਉਹ ਸਮਾਨ ਲੱਗਦੇ ਹਨ। ਦੋਵੇਂ ਅਜਿਹੀ ਚੀਜ਼ ਵਾਪਸ ਕਰਦੇ ਹਨ ਜਿਸਨੂੰ ਤੁਸੀਂ ਪੜ੍ਹ ਸਕਦੇ ਹੋ, ਦੋਵੇਂ re-renders ਤੋਂ ਬਚਦੇ ਹਨ, ਅਤੇ ਦੋਵੇਂ ਤੁਹਾਨੂੰ ਇੱਕ ਕਲਿੱਕ ਤੋਂ ਦੂਜੇ ਕਲਿੱਕ ਤੱਕ ਇੱਕ ਮੁੱਲ (value) ਨੂੰ ਯਾਦ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਹਾਲਾਂਕਿ, ਜੇਕਰ ਤੁਸੀਂ ਗਲਤ ਚੋਣ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ ਜਾਂ ਤਾਂ ਇੱਕ ਅਜਿਹੀ ਸਕ੍ਰੀਨ ਹੋਵੇਗੀ ਜੋ ਅਪਡੇਟ ਹੋਣ ਤੋਂ ਇਨਕਾਰ ਕਰਦੀ ਹੈ ਜਾਂ ਫਿਰ ਬੇਲੋੜੇ re-renders ਦੀ ਇੱਕ ਅੰਤਹੀਣ ਲੜੀ। ਚੋਣ ਸਿੰਟੈਕਸ (syntax) ਬਾਰੇ ਨਹੀਂ ਹੈ। ਇਹ ਇਸ ਬਾਰੇ ਹੈ ਕਿ ਕੀ React ਨੂੰ ਇਸ ਬਾਰੇ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ।

ਹਰ Hook ਅਸਲ ਵਿੱਚ ਕੀ ਕਰਦਾ ਹੈ

useState ਇੱਕ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸੰਚਾਰ ਕਰਨ ਲਈ React ਦਾ ਅਧਿਕਾਰਤ ਤਰੀਕਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਇੱਕ value ਅਤੇ ਇੱਕ setter function ਵਾਪਸ ਮਿਲਦਾ ਹੈ। React ਉਸ value ਨੂੰ ਕੰਪੋਨੈਂਟ ਦੀ ਪਛਾਣ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ। ਜਦੋਂ setter ਚਲਦਾ ਹੈ, ਤਾਂ React ਕਹਿੰਦਾ ਹੈ, “ਕੁਝ ਬਦਲ ਗਿਆ ਹੈ,” ਅਤੇ ਇੱਕ ਨਵਾਂ render ਸ਼ੈਡਿਊਲ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਸਕ੍ਰੀਨ ਅਪਡੇਟ ਹੋ ਸਕੇ।

ਦੂਜੇ ਪਾਸੇ, useRef ਇੱਕ current property ਵਾਲਾ ਇੱਕ ਸਾਧਾਰਨ JavaScript object ਤੋਂ ਵੱਧ ਕੁਝ ਨਹੀਂ ਹੈ। React ਹਰ ਇੱਕ render 'ਤੇ ਤੁਹਾਨੂੰ ਬਿਲਕੁਲ ਉਹੀ object reference ਦੇਣ ਦਾ ਵਾਅਦਾ ਕਰਦਾ ਹੈ। ਇਹ ਇਸ ਗੱਲ 'ਤੇ ਨਜ਼ਰ ਨਹੀਂ ਰੱਖਦਾ ਕਿ ਅੰਦਰ ਕੀ ਹੈ। someRef.current ਨੂੰ ਬਦਲਣਾ (mutating) ਚੁੱਪਚਾਪ ਹੁੰਦਾ ਹੈ। React ਇਸ 'ਤੇ ਕੋਈ ਪ੍ਰਤੀਕਿਰਿਆ (react) ਨਹੀਂ ਕਰੇਗਾ।

ਉਹ ਚੁੱਪਚਾਪ ਰਹਿਣਾ ਹੀ ਅਸਲ ਮਕਸਦ ਹੈ। Refs ਇੱਕ escape hatch ਹਨ, state ਦਾ ਬਦਲ ਨਹੀਂ।

Rendering ਦਾ ਫਰਕ

ਜੇਕਰ ਤੁਸੀਂ state ਬਦਲਦੇ ਹੋ, ਤਾਂ ਕੰਪੋਨੈਂਟ re-render ਹੁੰਦਾ ਹੈ। ਇਹ ਉਹ ਵਿਵਹਾਰ ਹੈ ਜਿਸਦੀ ਬਹੁਤ ਸਾਰੇ ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲੇ ਉਮੀਦ ਕਰਦੇ ਹਨ, ਅਤੇ ਇਹ ਉਹੀ ਹੈ ਜੋ ਤੁਸੀਂ ਉਦੋਂ ਚਾਹੁੰਦੇ ਹੋ ਜਦੋਂ ਨਵਾਂ ਡੇਟਾ ਸਕ੍ਰੀਨ 'ਤੇ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੋਵੇ। ਇੱਕ counter, ਇੱਕ form field, ਯੂਜ਼ਰਾਂ ਦੀ ਇੱਕ fetched list—ਜੇਕਰ ਯੂਜ਼ਰ ਇਸਨੂੰ ਦੇਖਦਾ ਹੈ, ਤਾਂ ਇਹ ਸ਼ਾਇਦ state ਵਿੱਚ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। React ਦਾ ਪੂਰਾ data flow ਇਸ ਵਿਚਾਰ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਬਣਿਆ ਹੈ ਕਿ state ਵਿੱਚ ਹੋਣ ਵਾਲੇ ਬਦਲਾਅ renderer ਨੂੰ DOM ਨੂੰ sync ਕਰਨ ਲਈ ਸੂਚਿਤ ਕਰਦੇ ਹਨ।

ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ref ਬਦਲਦੇ ਹੋ, ਤਾਂ ਵਿਜ਼ੂਅਲ ਤੌਰ 'ਤੇ ਕੁਝ ਨਹੀਂ ਹੁੰਦਾ। Variable ਤੁਰੰਤ ਅਤੇ synchronously ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਪਰ ਕੰਪੋਨੈਂਟ re-render ਨਹੀਂ ਹੁੰਦਾ। ਇਹ refs ਨੂੰ ਉਹਨਾਂ values ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ ਜੋ visual output ਦਾ ਹਿੱਸਾ ਬਿਨਾਂ ਹੋਏ ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰੂਨੀ ਕੰਮਕਾਜ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। Timer IDs, ਪਿਛਲੇ prop snapshots, ਜਾਂ ਸਿੱਧੇ DOM handles ਬਾਰੇ ਸੋਚੋ। UI ਨੂੰ ਉਸ interval ID ਦੀ ਪਰਵਾਹ ਨਹੀਂ ਹੁੰਦੀ ਜੋ carousel autoplay ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ; ਇਸਨੂੰ ਸਿਰਫ ਇਸ ਗੱਲ ਦੀ ਪਰਵਾਹ ਹੁੰਦੀ ਹੈ ਕਿ ਕਿਹੜੀ slide ਦਿਖਾਈ ਦੇ ਰਹੀ ਹੈ। Interval ID ਇੱਕ ref ਵਿੱਚ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਜਦੋਂ State ਸਹੀ ਸਾਧਨ ਹੈ

ਜਦੋਂ ਵੀ ਕੋਈ value ਤੁਹਾਡੇ UI ਦੀ ਸਤ੍ਹਾ (surface) ਦਾ ਹਿੱਸਾ ਹੋਵੇ, ਤਾਂ useState ਦੀ ਵਰਤੋਂ ਕਰੋ।

Input fields ਇੱਕ ਸਪੱਸ਼ਟ ਉਦਾਹਰਨ ਹਨ। ਜੇਕਰ ਕੋਈ ਯੂਜ਼ਰ ਇੱਕ email address ਟਾਈਪ ਕਰਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਸਦੀ ਜਾਂਚ (validate) ਕਰਨੀ ਪੈਂਦੀ ਹੈ ਅਤੇ ਬਾਕਸ ਦੇ ਹੇਠਾਂ ਇੱਕ error message ਦਿਖਾਉਣਾ ਪੈਂਦਾ ਹੈ, ਤਾਂ ਉਸ email string ਨੂੰ state ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। Validation logic ਅਤੇ error banner ਦੋਵੇਂ ਨਵੀਨਤਮ value 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ, ਅਤੇ React ਨੂੰ ਸਿਰਫ banner ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਬਾਰੇ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ state ਨੇ re-render ਨੂੰ trigger ਕੀਤਾ ਸੀ।

Counts ਅਤੇ toggles ਇੱਕ ਹੋਰ ਮੁੱਖ ਚੀਜ਼ ਹਨ। ਇੱਕ ਬਟਨ ਜੋ ਸਕੋਰ ਵਧਾਉਂਦਾ ਹੈ, ਇੱਕ modal open/close flag, ਇੱਕ tab index—ਇਹ ਸਭ state ਰਾਹੀਂ ਚਲਦੇ ਹਨ ਕਿਉਂਕਿ render output value ਦੇ ਨਾਲ ਬਦਲਦਾ ਹੈ। ਇੱਥੋਂ ਤੱਕ ਕਿ derived values, ਜਿਵੇਂ ਕਿ ਇੱਕ filtered list ਜੋ search string 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ state ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਕਿਉਂਕਿ source value ਯੂਜ਼ਰ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।

ਸਮੇਂ (timing) ਬਾਰੇ ਇੱਕ ਬਾਰੀਕੀ ਵੀ ਹੈ ਜਿਸ ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ। State updates asynchronous ਅਤੇ batched ਹੁੰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ event handler ਦੇ ਅੰਦਰ ਤਿੰਨ ਵਾਰ setCount(count + 1) ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ React ਤਿੰਨ ਵਾਰ render ਨਹੀਂ ਕਰਦਾ। ਇਹ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਿੰਗਲ update ਵਿੱਚ batch ਕਰ ਦਿੰਦਾ ਹੈ। ਤੁਹਾਡੇ ਚੱਲ ਰਹੇ function ਦੇ ਅੰਦਰ count variable ਵੀ ਅਗਲੇ render ਤੱਕ ਪੁਰਾਣਾ (stale) ਹੀ ਰਹਿੰਦਾ ਹੈ। ਇਹ batching ਇੱਕ feature ਹੈ। ਇਹ applications ਨੂੰ ਤੇਜ਼ ਰੱਖਦਾ ਹੈ। ਪਰ ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਅਗਲੀ ਹੀ ਲਾਈਨ 'ਤੇ state variable ਤੋਂ ਨਵੀਂ value ਦੀ ਉਮੀਦ ਨਹੀਂ ਕਰ ਸਕਦੇ।

ਜਦੋਂ Refs ਮਦਦਗਾਰ ਹੁੰਦੇ ਹਨ

Plumbing ਲਈ useRef ਦੀ ਵਰਤੋਂ ਕਰੋ, ਨਾ ਕਿ